<!DOCTYPE html>
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
  <meta name="description" content="tong.li&#39;s blog">
  <meta name="keyword" content="彤哥哥博客，95后技术爱好者,现就职于同程旅行/同程艺龙上海分公司，专注于互联网技术分享的平台。">
  
    <link rel="shortcut icon" href="/css/images/icon.png">
  
  <title>
    
      Vue新手进阶指南 | 彤哥哥的博客
    
  </title>
  <link href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
  <link href="https://cdn.staticfile.org/nprogress/0.2.0/nprogress.min.css" rel="stylesheet">
  <link href="https://cdn.staticfile.org/highlight.js/9.12.0/styles/tomorrow-night.min.css" rel="stylesheet">
  
<link rel="stylesheet" href="/css/style.css">

  
  <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://cdn.staticfile.org/geopattern/1.2.3/js/geopattern.min.js"></script>
  <script src="https://cdn.staticfile.org/nprogress/0.2.0/nprogress.min.js"></script>
  
    
<script src="/js/qrious.js"></script>

  
  
  
  
    <!-- MathJax support START -->
    <script type="text/x-mathjax-config">
      MathJax.Hub.Config({
        tex2jax: {
          inlineMath: [ ['$','$'], ["\\(","\\)"]  ],
          processEscapes: true,
          skipTags: ['script', 'noscript', 'style', 'textarea', 'pre', 'code']
        }
      });
    </script>

    <script type="text/x-mathjax-config">
      MathJax.Hub.Queue(function() {
        var all = MathJax.Hub.getAllJax(), i;
        for (i=0; i < all.length; i += 1) {
          all[i].SourceElement().parentNode.className += ' has-jax';
        }
      });
    </script>
    <script type="text/javascript" src="https://cdn.staticfile.org/mathjax/2.7.5/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
    <!-- MathJax support END -->
  


  
  
    
<script src="/js/local-search.js"></script>


<meta name="generator" content="Hexo 5.4.2"></head>
<div class="wechat-share">
  <img src="/css/images/logo.png" />
</div>
  <body>
    <header class="header fixed-header">
  <div class="header-container">
    <a class="home-link" href="/">
      <div class="logo"></div>
      <span>彤哥哥的博客</span>
    </a>
    <ul class="right-list">
      
        <li class="list-item">
          
            <a href="/" class="item-link">主页</a>
          
        </li>
      
        <li class="list-item">
          
            <a href="/series/" class="item-link">分类</a>
          
        </li>
      
        <li class="list-item">
          
            <a href="/tags/" class="item-link">标签</a>
          
        </li>
      
        <li class="list-item">
          
            <a href="/archives/" class="item-link">归档</a>
          
        </li>
      
        <li class="list-item">
          
            <a href="/project/" class="item-link">项目</a>
          
        </li>
      
        <li class="list-item">
          
            <a href="/about/" class="item-link">关于</a>
          
        </li>
      
      
        <li class="menu-item menu-item-search right-list">
    <a role="button" class="popup-trigger">
        <i class="fa fa-search fa-fw"></i>
    </a>
</li>
      
    </ul>
    <div class="menu">
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </div>
    <div class="menu-mask">
      <ul class="menu-list">
        
          <li class="menu-item">
            
              <a href="/" class="menu-link">主页</a>
            
          </li>
        
          <li class="menu-item">
            
              <a href="/series/" class="menu-link">分类</a>
            
          </li>
        
          <li class="menu-item">
            
              <a href="/tags/" class="menu-link">标签</a>
            
          </li>
        
          <li class="menu-item">
            
              <a href="/archives/" class="menu-link">归档</a>
            
          </li>
        
          <li class="menu-item">
            
              <a href="/project/" class="menu-link">项目</a>
            
          </li>
        
          <li class="menu-item">
            
              <a href="/about/" class="menu-link">关于</a>
            
          </li>
        
      </ul>
    </div>
    
      <div class="search-pop-overlay">
    <div class="popup search-popup">
        <div class="search-header">
            <span class="search-icon">
                <i class="fa fa-search"></i>
            </span>
            <div class="search-input-container">
                <input autocomplete="off" autocapitalize="off"
                    placeholder="Please enter your keyword(s) to search." spellcheck="false"
                    type="search" class="search-input">
            </div>
            <span class="popup-btn-close">
                <i class="fa fa-times-circle"></i>
            </span>
        </div>
        <div id="search-result">
            <div id="no-result">
                <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
            </div>
        </div>
    </div>
</div>
    
  </div>
</header>

    <div id="article-banner">
  <h2>Vue新手进阶指南</h2>
  <p class="post-date">2020-02-03</p>
  <div class="arrow-down">
    <a href="javascript:;"></a>
  </div>
</div>
<main class="app-body flex-box">
  <!-- Article START -->
  <article class="post-article">
    <section class="markdown-content"><h1 id="1-Vue生命周期"><a href="#1-Vue生命周期" class="headerlink" title="1. Vue生命周期"></a>1. Vue生命周期</h1><h2 id="1-1-什么是生命周期"><a href="#1-1-什么是生命周期" class="headerlink" title="1.1 什么是生命周期"></a>1.1 什么是生命周期</h2><ul>
<li>从Vue实例创建、运行、到销毁期间，总是伴随着各种各样的事件，这些事件，统称为生命周期！</li>
<li><a target="_blank" rel="noopener" href="https://cn.vuejs.org/v2/api/#%E9%80%89%E9%A1%B9-%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F%E9%92%A9%E5%AD%90">生命周期钩子</a>：就是生命周期事件的别名而已；</li>
<li>生命周期钩子 = 生命周期函数 = 生命周期事件</li>
</ul>
<h2 id="1-2-Vue实例的生命周期"><a href="#1-2-Vue实例的生命周期" class="headerlink" title="1.2 Vue实例的生命周期"></a>1.2 Vue实例的生命周期</h2><ul>
<li>创建期间的生命周期函数：<ol>
<li>beforeCreate：实例刚在内存中被创建出来，此时，还没有初始化好 data 和 methods 属性</li>
<li>created：实例已经在内存中创建OK，此时 data 和 methods 已经创建OK，此时还没有开始 编译模板</li>
<li>beforeMount：此时已经完成了模板的编译，但是还没有挂载到页面中</li>
<li>mounted：此时，已经将编译好的模板，挂载到了页面指定的容器中显示</li>
</ol>
</li>
<li>运行期间的生命周期函数：<ol>
<li>beforeUpdate：状态更新之前执行此函数， 此时 data 中的状态值是最新的，但是界面上显示的 数据还是旧的，因为此时还没有开始重新渲染DOM节点</li>
<li>updated：实例更新完毕之后调用此函数，此时 data 中的状态值 和 界面上显示的数据，都已经完成了更新，界面已经被重新渲染好了！</li>
</ol>
</li>
<li>销毁期间的生命周期函数：<ol>
<li>beforeDestroy：实例销毁之前调用。在这一步，实例仍然完全可用。</li>
<li>destroyed：Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。</li>
</ol>
</li>
</ul>
<p><img src="https://ltyeamin.github.io/imgs/2020/07/20200731163211.png" alt="Vue实例生命周期"></p>
<h1 id="2-Vue组件"><a href="#2-Vue组件" class="headerlink" title="2. Vue组件"></a>2. Vue组件</h1><h2 id="2-1-什么是组件"><a href="#2-1-什么是组件" class="headerlink" title="2.1 什么是组件"></a>2.1 什么是组件</h2><p> 组件的出现，就是为了拆分Vue实例的代码量的，能够让我们以不同的组件，来划分不同的功能模块，将来我们需要什么样的功能，就可以去调用对应的组件即可；<br>组件化和模块化的不同：</p>
<ul>
<li>模块化： 是从代码逻辑的角度进行划分的；方便代码分层开发，保证每个功能模块的职能单一；</li>
<li>组件化： 是从UI界面的角度进行划分的；前端的组件化，方便UI组件的重用；</li>
</ul>
<h2 id="2-2-组件类型及其定义"><a href="#2-2-组件类型及其定义" class="headerlink" title="2.2 组件类型及其定义"></a>2.2 组件类型及其定义</h2><h3 id="2-2-1-全局组件"><a href="#2-2-1-全局组件" class="headerlink" title="2.2.1 全局组件"></a>2.2.1 全局组件</h3><ol start="0">
<li><p>基本的html代码</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;app&quot;</span>&gt;</span></span><br><span class="line">   <span class="comment">&lt;!-- 自定义的login登录组件 --&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">login</span>&gt;</span><span class="tag">&lt;/<span class="name">login</span>&gt;</span></span><br><span class="line">    <span class="comment">&lt;!-- 无属性的可以以单节点书写 --&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">login</span>/&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// 创建 login 实例，得到 login</span></span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">var</span> vm = <span class="keyword">new</span> <span class="title class_">Vue</span>(&#123;</span></span><br><span class="line"><span class="language-javascript">        <span class="attr">el</span>: <span class="string">&#x27;#app&#x27;</span>,</span></span><br><span class="line"><span class="language-javascript">        <span class="attr">data</span>: &#123;&#125;,</span></span><br><span class="line"><span class="language-javascript">        <span class="attr">methods</span>: &#123;&#125;</span></span><br><span class="line"><span class="language-javascript">    &#125;);</span></span><br><span class="line"><span class="language-javascript"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure></li>
<li><p>使用 Vue.extend 配合 Vue.component 方法</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 1.1 使用 Vue.extend 来创建全局的Vue组件</span></span><br><span class="line"><span class="keyword">var</span> login = <span class="title class_">Vue</span>.<span class="title function_">extend</span>(&#123;</span><br><span class="line">    <span class="attr">template</span>: <span class="string">&#x27;&lt;h3&gt;这是使用Vue.extend创建的登录组件&lt;/h3&gt;&#x27;</span> <span class="comment">// 通过 template 属性，指定了组件要展示的HTML结构</span></span><br><span class="line">&#125;)</span><br><span class="line"><span class="title class_">Vue</span>.<span class="title function_">component</span>(<span class="string">&#x27;login&#x27;</span>, login)  <span class="comment">// 注册为全局组件</span></span><br></pre></td></tr></table></figure></li>
<li><p>直接使用 Vue.component方法</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 1.2 使用 Vue.component(&#x27;组件的名称&#x27;, 创建出来的组件模板对象)</span></span><br><span class="line"><span class="keyword">var</span> login = <span class="string">&quot;&lt;h3&gt;这是使用Vue.component创建的登录组件&lt;/h3&gt;&quot;</span>;</span><br><span class="line"><span class="comment">// 注意： 组件中的DOM结构，最好有且只能有唯一的根元素（Root Element）来进行包裹！低版本的vue有可能报错</span></span><br><span class="line"><span class="title class_">Vue</span>.<span class="title function_">component</span>(<span class="string">&#x27;login&#x27;</span>, &#123;</span><br><span class="line">    template : login <span class="comment">// 注册为全局组件</span></span><br><span class="line">&#125;)</span><br><span class="line"> <span class="comment">// 如果使用 Vue.component 定义全局组件的时候，组件名称使用了驼峰命名，则在引用组件的时候，需要把 大写的驼峰改为小写的字母，同时，两个单词之前，使用 - 链接，如果不使用驼峰,则直接拿名称来使用即可;</span></span><br><span class="line"><span class="title class_">Vue</span>.<span class="title function_">component</span>(<span class="string">&#x27;toLogin&#x27;</span>, &#123;</span><br><span class="line">    <span class="comment">// 比如定义的全局组件为toLogin，页面&lt;toLogin&gt;&lt;/toLogin&gt;不可能显示组件，要想显示组件需要拆开这样写&lt;to-</span></span><br><span class="line">    template : login</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure></li>
</ol>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">3. 将模板字符串，定义到script标签中</span><br><span class="line"></span><br><span class="line">```html</span><br><span class="line">&lt;!-- 通过script标签定义模板 --&gt;</span><br><span class="line">&lt;script id=&quot;login&quot; type=&quot;x-template&quot;&gt;</span><br><span class="line">    &lt;div&gt;</span><br><span class="line">        &lt;a href=&quot;#&quot;&gt;登录&lt;/a&gt;</span><br><span class="line">    &lt;/div&gt;</span><br><span class="line">&lt;/script&gt;</span><br></pre></td></tr></table></figure>

<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="title class_">Vue</span>.<span class="title function_">component</span>(<span class="string">&#x27;login&#x27;</span>, &#123;  <span class="comment">// 定义并注册为全局组件</span></span><br><span class="line">   <span class="attr">template</span>: <span class="string">&#x27;#login&#x27;</span>  <span class="comment">// 引用模板ID</span></span><br><span class="line">&#125;);</span><br><span class="line"></span><br><span class="line"><span class="comment">// 注意这个必须在最后面，不然组件定义会失败</span></span><br><span class="line"><span class="keyword">var</span> vm = <span class="keyword">new</span> <span class="title class_">Vue</span>(&#123;</span><br><span class="line">    <span class="attr">el</span>: <span class="string">&#x27;#app&#x27;</span>,</span><br><span class="line">    <span class="attr">data</span>: &#123;&#125;,</span><br><span class="line">    <span class="attr">methods</span>: &#123;&#125;</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>

<h3 id="2-2-3-私有组件"><a href="#2-2-3-私有组件" class="headerlink" title="2.2.3 私有组件"></a>2.2.3 私有组件</h3><ol>
<li><p>先定义两个组件模板</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">&lt;!-- 在 被控制的 #app 外面,使用 template 元素,定义组件的HTML模板结构  --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">template</span> <span class="attr">id</span>=<span class="string">&quot;tmpl&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">h1</span>&gt;</span>这是通过template元素,在外部定义的组件结构,这个方式,有代码的只能提示和高亮<span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">template</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">template</span> <span class="attr">id</span>=<span class="string">&quot;tmpl2&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">h1</span>&gt;</span>这是私有的login组件<span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">template</span>&gt;</span></span><br></pre></td></tr></table></figure></li>
<li><p>定义实例</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 将tmpl定义为全局属性</span></span><br><span class="line"><span class="title class_">Vue</span>.<span class="title function_">component</span>(<span class="string">&#x27;mycom3&#x27;</span>, &#123;</span><br><span class="line">    <span class="attr">template</span>: <span class="string">&#x27;#tmpl&#x27;</span></span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line"><span class="comment">// 创建 Vue 实例，得到 ViewModel</span></span><br><span class="line"><span class="keyword">var</span> vm = <span class="keyword">new</span> <span class="title class_">Vue</span>(&#123;</span><br><span class="line">    <span class="attr">el</span>: <span class="string">&#x27;#app&#x27;</span>,</span><br><span class="line">    <span class="attr">data</span>: &#123;&#125;,</span><br><span class="line">    <span class="attr">methods</span>: &#123;&#125;</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>

<p>var vm2 = new Vue({</p>
<pre><code>el: &#39;#app2&#39;,
data: &#123;&#125;,
methods: &#123;&#125;,
filters: &#123;&#125;,
directives: &#123;&#125;,
components: &#123; // 将tmpl2定义实例内部私有组件的
    login: &#123;
        template: &#39;#tmpl2&#39;
    &#125;
&#125;,

beforeCreate() &#123; &#125;,
created() &#123; &#125;,
beforeMount() &#123; &#125;,
mounted() &#123; &#125;,
beforeUpdate() &#123; &#125;,
updated() &#123; &#125;,
beforeDestroy() &#123; &#125;,
destroyed() &#123; &#125;
</code></pre>
<p>})</p>
</li>
</ol>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line">3. 测试私有组件</span><br><span class="line"></span><br><span class="line">```html</span><br><span class="line">&lt;div id=&quot;app&quot;&gt;</span><br><span class="line">    &lt;mycom1&gt;&lt;/mycom1&gt;</span><br><span class="line">    &lt;!-- 这是login是私有的组件，所以页面上不会显示出来 --&gt;</span><br><span class="line">    &lt;!-- 除此之外，console会报错 Unknown custom element: &lt;login&gt; - did you register the component correctly? For recursive components, make sure to provide the &quot;name&quot; option. --&gt;</span><br><span class="line">    &lt;login&gt;&lt;/login&gt;</span><br><span class="line">&lt;/div&gt;</span><br><span class="line"></span><br><span class="line">&lt;div id=&quot;app2&quot;&gt;</span><br><span class="line">    &lt;mycom1&gt;&lt;/mycom1&gt;</span><br><span class="line">    &lt;!-- 这个本身就是app2的私有组件，可以正常显示 --&gt;</span><br><span class="line">    &lt;login&gt;&lt;/login&gt;</span><br><span class="line">&lt;/div&gt;</span><br></pre></td></tr></table></figure>

<h2 id="2-3-组件中展示数据和响应事件"><a href="#2-3-组件中展示数据和响应事件" class="headerlink" title="2.3 组件中展示数据和响应事件"></a>2.3 组件中展示数据和响应事件</h2><p>在组件中，<code>data</code>需要被定义为一个方法，例如：</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;app&quot;</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">mycom1</span>&gt;</span><span class="tag">&lt;/<span class="name">mycom1</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">        <span class="comment">// 1. 组件可以有自己的 data 数据</span></span></span><br><span class="line"><span class="language-javascript">        <span class="comment">// 2. 组件的 data 和 实例的 data 有点不一样,实例中的 data 可以为一个对象,但是 组件中的 data 必须是一个方法</span></span></span><br><span class="line"><span class="language-javascript">        <span class="comment">// 3. 组件中的 data 除了必须为一个方法之外,这个方法内部,还必须返回一个对象才行;</span></span></span><br><span class="line"><span class="language-javascript">        <span class="comment">// 4. 组件中 的data 数据,使用方式,和实例中的 data 使用方式完全一样!!!</span></span></span><br><span class="line"><span class="language-javascript">        <span class="title class_">Vue</span>.<span class="title function_">component</span>(<span class="string">&#x27;mycom1&#x27;</span>, &#123;</span></span><br><span class="line"><span class="language-javascript">            <span class="attr">template</span>: <span class="string">&#x27;&lt;h1 @click=&quot;sayHello&quot;&gt;&#123;&#123;msg&#125;&#125;，你好，欢迎学习Vue!&lt;/h1&gt;&#x27;</span>,</span></span><br><span class="line"><span class="language-javascript">            <span class="attr">data</span>: <span class="keyword">function</span> (<span class="params"></span>) &#123;</span></span><br><span class="line"><span class="language-javascript">                <span class="keyword">return</span> &#123;</span></span><br><span class="line"><span class="language-javascript">                    <span class="attr">msg</span>: <span class="string">&#x27;李彤&#x27;</span></span></span><br><span class="line"><span class="language-javascript">                &#125;</span></span><br><span class="line"><span class="language-javascript">            &#125;,</span></span><br><span class="line"><span class="language-javascript">            <span class="attr">methods</span>: &#123;</span></span><br><span class="line"><span class="language-javascript">                <span class="title function_">sayHello</span>(<span class="params"></span>) &#123;</span></span><br><span class="line"><span class="language-javascript">                    <span class="comment">// 当前this指的是vm这个实例</span></span></span><br><span class="line"><span class="language-javascript">                    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="variable language_">this</span>)</span></span><br><span class="line"><span class="language-javascript">                    <span class="comment">// 获取data中的数据</span></span></span><br><span class="line"><span class="language-javascript">                    <span class="title function_">alert</span>(<span class="variable language_">this</span>.<span class="property">$data</span>.<span class="property">msg</span> + <span class="string">&#x27;, 你好,&#x27;</span> +  <span class="variable language_">this</span>.<span class="property">msg</span>)</span></span><br><span class="line"><span class="language-javascript">                &#125;</span></span><br><span class="line"><span class="language-javascript">            &#125;</span></span><br><span class="line"><span class="language-javascript">        &#125;)</span></span><br><span class="line"><span class="language-javascript">        <span class="comment">// 创建 Vue 实例，得到 ViewModel</span></span></span><br><span class="line"><span class="language-javascript">        <span class="keyword">var</span> vm = <span class="keyword">new</span> <span class="title class_">Vue</span>(&#123;</span></span><br><span class="line"><span class="language-javascript">            <span class="attr">el</span>: <span class="string">&#x27;#app&#x27;</span>,</span></span><br><span class="line"><span class="language-javascript">            <span class="attr">data</span>: &#123;&#125;,</span></span><br><span class="line"><span class="language-javascript">            <span class="attr">methods</span>: &#123;&#125;</span></span><br><span class="line"><span class="language-javascript">        &#125;);</span></span><br><span class="line"><span class="language-javascript">    </span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p>在子组件中，如果将模板字符串，定义到了script标签中，那么，要访问子组件身上的<code>data</code>属性中的值，需要使用<code>this</code>来访问；</p>
<h2 id="2-4-探查组件中data属性为对象的原因"><a href="#2-4-探查组件中data属性为对象的原因" class="headerlink" title="2.4 探查组件中data属性为对象的原因"></a>2.4 探查组件中data属性为对象的原因</h2><p>为什么组件中的data属性必须定义为一个方法并返回一个对象？我们通过计数器案例演示一个问题:</p>
<ol>
<li><p>定义一个组件模板</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">template</span> <span class="attr">id</span>=<span class="string">&quot;tmpl&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span>&gt;</span></span><br><span class="line">        <span class="comment">&lt;!-- 定义一个按钮，它功能是点击一次按钮count+1的操作 --&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;button&quot;</span> <span class="attr">value</span>=<span class="string">&quot;+1&quot;</span> @<span class="attr">click</span>=<span class="string">&quot;increment&quot;</span>&gt;</span></span><br><span class="line">        <span class="comment">&lt;!-- 显示计算后的结果 --&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">h3</span>&gt;</span>&#123;&#123;count&#125;&#125;<span class="tag">&lt;/<span class="name">h3</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">template</span>&gt;</span></span><br></pre></td></tr></table></figure></li>
<li><p>先定义一个可重用的counter计数器组件</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 定义一个全局的计数器</span></span><br><span class="line"><span class="keyword">var</span> dataObj = &#123; <span class="attr">count</span>: <span class="number">0</span> &#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 这是一个计数器的组件, 身上有个按钮,每当点击按钮,让 data 中的 count 值 +1</span></span><br><span class="line"><span class="title class_">Vue</span>.<span class="title function_">component</span>(<span class="string">&#x27;counter&#x27;</span>, &#123;</span><br><span class="line">    <span class="attr">template</span>: <span class="string">&#x27;#tmpl&#x27;</span>,</span><br><span class="line">    <span class="attr">data</span>: <span class="keyword">function</span> (<span class="params"></span>) &#123;</span><br><span class="line">        <span class="keyword">return</span> dataObj</span><br><span class="line">     <span class="comment">// return &#123; count: 0 &#125;</span></span><br><span class="line">    &#125;,</span><br><span class="line">    <span class="attr">methods</span>: &#123;</span><br><span class="line">        <span class="title function_">increment</span>(<span class="params"></span>) &#123;</span><br><span class="line">            <span class="variable language_">this</span>.<span class="property">count</span>++</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line"><span class="comment">// 创建 Vue 实例，得到 ViewModel</span></span><br><span class="line"><span class="keyword">var</span> vm = <span class="keyword">new</span> <span class="title class_">Vue</span>(&#123;</span><br><span class="line">    <span class="attr">el</span>: <span class="string">&#x27;#app&#x27;</span>,</span><br><span class="line">    <span class="attr">data</span>: &#123;&#125;,</span><br><span class="line">    <span class="attr">methods</span>: &#123;&#125;</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure></li>
<li><p>书写页面</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;app&quot;</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">counter</span>&gt;</span><span class="tag">&lt;/<span class="name">counter</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">hr</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">counter</span>&gt;</span><span class="tag">&lt;/<span class="name">counter</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">hr</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">counter</span>&gt;</span><span class="tag">&lt;/<span class="name">counter</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br></pre></td></tr></table></figure></li>
<li><p>执行按钮结果，我们随便点击一个按钮，其他的按钮也会触发，这就是共用了全局变量的问题。</p>
</li>
<li><p>我们定义组件的时候，返回一个方法就可以实现正确的需求，原因是每个方法的count都是私有的，不会存在共享变量的问题。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 这是一个计数器的组件, 身上有个按钮,每当点击按钮,让 data 中的 count 值 +1</span></span><br><span class="line"><span class="title class_">Vue</span>.<span class="title function_">component</span>(<span class="string">&#x27;counter&#x27;</span>, &#123;</span><br><span class="line">    <span class="attr">template</span>: <span class="string">&#x27;#tmpl&#x27;</span>,</span><br><span class="line">    <span class="attr">data</span>: <span class="keyword">function</span> (<span class="params"></span>) &#123;</span><br><span class="line">        <span class="comment">// return dataObj</span></span><br><span class="line">        <span class="keyword">return</span> &#123; <span class="attr">count</span>: <span class="number">0</span> &#125;  <span class="comment">// 定义这样就可以了</span></span><br><span class="line">    &#125;,</span><br><span class="line">    <span class="attr">methods</span>: &#123;</span><br><span class="line">        <span class="title function_">increment</span>(<span class="params"></span>) &#123;</span><br><span class="line">            <span class="variable language_">this</span>.<span class="property">count</span>++</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure></li>
</ol>
<h2 id="2-5-局部子组件"><a href="#2-5-局部子组件" class="headerlink" title="2.5 局部子组件"></a>2.5 局部子组件</h2><ol>
<li><p>组件实例定义方式</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// 创建 Vue 实例，得到 ViewModel</span></span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">var</span> vm = <span class="keyword">new</span> <span class="title class_">Vue</span>(&#123;</span></span><br><span class="line"><span class="language-javascript">        <span class="attr">el</span>: <span class="string">&#x27;#app&#x27;</span>,</span></span><br><span class="line"><span class="language-javascript">        <span class="attr">data</span>: &#123;&#125;,</span></span><br><span class="line"><span class="language-javascript">        <span class="attr">methods</span>: &#123;&#125;,</span></span><br><span class="line"><span class="language-javascript">        <span class="attr">components</span>: &#123; <span class="comment">// 定义子组件</span></span></span><br><span class="line"><span class="language-javascript">            <span class="attr">account</span>: &#123; <span class="comment">// account 组件</span></span></span><br><span class="line"><span class="language-javascript">                <span class="attr">template</span>: <span class="string">&#x27;&lt;div&gt;&lt;h1&gt;这是Account组件&#123;&#123;name&#125;&#125;&lt;/h1&gt;&lt;login&gt;&lt;/login&gt;&lt;/div&gt;&#x27;</span>, <span class="comment">// 在这里使用定义的子组件,组件嵌套</span></span></span><br><span class="line"><span class="language-javascript">                <span class="attr">components</span>: &#123; <span class="comment">// 定义子组件的子组件</span></span></span><br><span class="line"><span class="language-javascript">                    <span class="attr">login</span>: &#123; <span class="comment">// login 组件</span></span></span><br><span class="line"><span class="language-javascript">                        <span class="attr">template</span>: <span class="string">&quot;&lt;h3&gt;这是登录组件&lt;/h3&gt;&quot;</span></span></span><br><span class="line"><span class="language-javascript">                    &#125;</span></span><br><span class="line"><span class="language-javascript">                &#125;</span></span><br><span class="line"><span class="language-javascript">            &#125;</span></span><br><span class="line"><span class="language-javascript">        &#125;</span></span><br><span class="line"><span class="language-javascript">    &#125;);</span></span><br><span class="line"><span class="language-javascript"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure></li>
<li><p>引用组件</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;app&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">account</span>&gt;</span><span class="tag">&lt;/<span class="name">account</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure></li>
</ol>
<h2 id="2-6-组件切换"><a href="#2-6-组件切换" class="headerlink" title="2.6 组件切换"></a>2.6 组件切换</h2><h3 id="2-6-1-使用flag标识符结合v-if和v-else切换组件"><a href="#2-6-1-使用flag标识符结合v-if和v-else切换组件" class="headerlink" title="2.6.1 使用flag标识符结合v-if和v-else切换组件"></a>2.6.1 使用<code>flag</code>标识符结合<code>v-if</code>和<code>v-else</code>切换组件</h3><ol>
<li><p>页面结构</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;app&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;button&quot;</span> <span class="attr">value</span>=<span class="string">&quot;toggle&quot;</span> @<span class="attr">click</span>=<span class="string">&quot;flag=!flag&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">my-com1</span> <span class="attr">v-if</span>=<span class="string">&quot;flag&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">my-com1</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">my-com2</span> <span class="attr">v-else</span>=<span class="string">&quot;flag&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">my-com2</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure></li>
<li><p>Vue实例定义</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">    <span class="title class_">Vue</span>.<span class="title function_">component</span>(<span class="string">&#x27;myCom1&#x27;</span>, &#123;</span></span><br><span class="line"><span class="language-javascript">        <span class="attr">template</span>: <span class="string">&#x27;&lt;h3&gt;很好&lt;/h3&gt;&#x27;</span></span></span><br><span class="line"><span class="language-javascript">    &#125;)</span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">    <span class="title class_">Vue</span>.<span class="title function_">component</span>(<span class="string">&#x27;myCom2&#x27;</span>, &#123;</span></span><br><span class="line"><span class="language-javascript">        <span class="attr">template</span>: <span class="string">&#x27;&lt;h3&gt;不好&lt;/h3&gt;&#x27;</span></span></span><br><span class="line"><span class="language-javascript">    &#125;)</span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// 创建 Vue 实例，得到 ViewModel</span></span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">var</span> vm = <span class="keyword">new</span> <span class="title class_">Vue</span>(&#123;</span></span><br><span class="line"><span class="language-javascript">        <span class="attr">el</span>: <span class="string">&#x27;#app&#x27;</span>,</span></span><br><span class="line"><span class="language-javascript">        <span class="attr">data</span>: &#123;</span></span><br><span class="line"><span class="language-javascript">            <span class="attr">flag</span>: <span class="literal">true</span></span></span><br><span class="line"><span class="language-javascript">        &#125;,</span></span><br><span class="line"><span class="language-javascript">        <span class="attr">methods</span>: &#123;&#125;</span></span><br><span class="line"><span class="language-javascript">    &#125;);</span></span><br><span class="line"><span class="language-javascript"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h3 id="2-6-2-使用-is属性来切换不同的子组件"><a href="#2-6-2-使用-is属性来切换不同的子组件" class="headerlink" title="2.6.2 使用:is属性来切换不同的子组件"></a>2.6.2 使用<code>:is</code>属性来切换不同的子组件</h3></li>
<li><p>组件实例定义方式</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 登录组件</span></span><br><span class="line"><span class="keyword">const</span> login = <span class="title class_">Vue</span>.<span class="title function_">extend</span>(&#123;</span><br><span class="line">    <span class="attr">template</span>: <span class="string">`&lt;div&gt;</span></span><br><span class="line"><span class="string">        &lt;h3&gt;登录组件&lt;/h3&gt;</span></span><br><span class="line"><span class="string">        &lt;/div&gt;`</span></span><br><span class="line">&#125;);</span><br><span class="line"><span class="title class_">Vue</span>.<span class="title function_">component</span>(<span class="string">&#x27;login&#x27;</span>, login);</span><br><span class="line"></span><br><span class="line"><span class="comment">// 注册组件</span></span><br><span class="line"><span class="keyword">const</span> register = <span class="title class_">Vue</span>.<span class="title function_">extend</span>(&#123;</span><br><span class="line">    <span class="attr">template</span>: <span class="string">`&lt;div&gt;</span></span><br><span class="line"><span class="string">        &lt;h3&gt;注册组件&lt;/h3&gt;</span></span><br><span class="line"><span class="string">        &lt;/div&gt;`</span></span><br><span class="line">&#125;);</span><br><span class="line"><span class="title class_">Vue</span>.<span class="title function_">component</span>(<span class="string">&#x27;register&#x27;</span>, register);</span><br><span class="line"></span><br><span class="line"><span class="comment">// 创建 Vue 实例，得到 ViewModel</span></span><br><span class="line"><span class="keyword">var</span> vm = <span class="keyword">new</span> <span class="title class_">Vue</span>(&#123;</span><br><span class="line">    <span class="attr">el</span>: <span class="string">&#x27;#app&#x27;</span>,</span><br><span class="line">    <span class="attr">data</span>: &#123; <span class="attr">comName</span>: <span class="string">&#x27;login&#x27;</span> &#125;,</span><br><span class="line">    <span class="attr">methods</span>: &#123;&#125;</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure></li>
<li><p>使用<code>component</code>标签，来引用组件，并通过<code>:is</code>属性来指定要加载的组件</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;app&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">&quot;#&quot;</span> @<span class="attr">click.prevent</span>=<span class="string">&quot;comName=&#x27;login&#x27;&quot;</span>&gt;</span>登录<span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">&quot;#&quot;</span> @<span class="attr">click.prevent</span>=<span class="string">&quot;comName=&#x27;register&#x27;&quot;</span>&gt;</span>注册<span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">hr</span>&gt;</span></span><br><span class="line">     <span class="comment">&lt;!-- Vue淡入淡出动画效果 --&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">transition</span> <span class="attr">mode</span>=<span class="string">&quot;out-in&quot;</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">component</span> <span class="attr">:is</span>=<span class="string">&quot;comName&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">component</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">transition</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure></li>
<li><p>添加切换样式</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">style</span>&gt;</span><span class="language-css"></span></span><br><span class="line"><span class="language-css">    <span class="selector-class">.v-enter</span>,</span></span><br><span class="line"><span class="language-css">    <span class="selector-class">.v-leave-to</span> &#123;</span></span><br><span class="line"><span class="language-css">        <span class="attribute">opacity</span>: <span class="number">0</span>;</span></span><br><span class="line"><span class="language-css">        <span class="attribute">transform</span>: <span class="built_in">translateX</span>(<span class="number">30px</span>);</span></span><br><span class="line"><span class="language-css">    &#125;</span></span><br><span class="line"><span class="language-css"></span></span><br><span class="line"><span class="language-css">    <span class="selector-class">.v-enter-active</span>,</span></span><br><span class="line"><span class="language-css">    <span class="selector-class">.v-leave-active</span> &#123;</span></span><br><span class="line"><span class="language-css">        <span class="attribute">position</span>: absolute;</span></span><br><span class="line"><span class="language-css">        <span class="attribute">transition</span>: all <span class="number">0.3s</span> ease;</span></span><br><span class="line"><span class="language-css">    &#125;</span></span><br><span class="line"><span class="language-css"></span></span><br><span class="line"><span class="language-css">    <span class="selector-tag">h3</span>&#123;</span></span><br><span class="line"><span class="language-css">        <span class="attribute">margin</span>: <span class="number">0</span>;</span></span><br><span class="line"><span class="language-css">    &#125;</span></span><br><span class="line"><span class="language-css"></span><span class="tag">&lt;/<span class="name">style</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h2 id="2-7-组件间值传递和方法传递"><a href="#2-7-组件间值传递和方法传递" class="headerlink" title="2.7 组件间值传递和方法传递"></a>2.7 组件间值传递和方法传递</h2></li>
</ol>
<h3 id="2-7-1-父组件向子组件传值"><a href="#2-7-1-父组件向子组件传值" class="headerlink" title="2.7.1 父组件向子组件传值"></a>2.7.1 父组件向子组件传值</h3><ol>
<li>组件实例定义方式，注意：一定要使用<code>props</code>属性来定义父组件传递过来的数据<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 创建 Vue 实例，得到 ViewModel</span></span><br><span class="line"><span class="keyword">var</span> vm = <span class="keyword">new</span> <span class="title class_">Vue</span>(&#123;</span><br><span class="line">    <span class="attr">el</span>: <span class="string">&#x27;#app&#x27;</span>,</span><br><span class="line">    <span class="attr">data</span>: &#123;</span><br><span class="line">        <span class="attr">msg</span>: <span class="string">&#x27;123 啊-父组件中的数据&#x27;</span></span><br><span class="line">    &#125;,</span><br><span class="line">    <span class="attr">methods</span>: &#123;&#125;,</span><br><span class="line"></span><br><span class="line">    <span class="attr">components</span>: &#123;</span><br><span class="line">        <span class="comment">// 结论：经过演示，发现，子组件中，默认无法访问到 父组件中的 data 上的数据 和 methods 中的方法</span></span><br><span class="line">        <span class="attr">com1</span>: &#123;</span><br><span class="line">            <span class="title function_">data</span>(<span class="params"></span>) &#123; <span class="comment">// 注意： 子组件中的 data 数据，并不是通过 父组件传递过来的，而是子组件自身私有的，比如： 子组件通过 Ajax ，请求回来的数据，都可以放到 data 身上；</span></span><br><span class="line">                <span class="comment">// data 上的数据，都是可读可写的；</span></span><br><span class="line">                <span class="keyword">return</span> &#123;</span><br><span class="line">                    <span class="attr">title</span>: <span class="string">&#x27;123&#x27;</span>,</span><br><span class="line">                    <span class="attr">content</span>: <span class="string">&#x27;qqq&#x27;</span></span><br><span class="line">                &#125;</span><br><span class="line">            &#125;,</span><br><span class="line">            <span class="attr">template</span>: <span class="string">&#x27;&lt;h1 @click=&quot;change&quot;&gt;这是子组件 --- &#123;&#123; parentmsg &#125;&#125;&lt;/h1&gt;&#x27;</span>,</span><br><span class="line">            <span class="comment">// 注意： 组件中的 所有 props 中的数据，都是通过 父组件传递给子组件的</span></span><br><span class="line">            <span class="comment">// props 中的数据，都是只读的，无法重新赋值</span></span><br><span class="line">            <span class="attr">props</span>: [<span class="string">&#x27;parentmsg&#x27;</span>], <span class="comment">// 把父组件传递过来的 parentmsg 属性，先在 props 数组中，定义一下，这样，才能使用这个数据</span></span><br><span class="line">            <span class="attr">directives</span>: &#123;&#125;,</span><br><span class="line">            <span class="attr">filters</span>: &#123;&#125;,</span><br><span class="line">            <span class="attr">components</span>: &#123;&#125;,</span><br><span class="line">            <span class="attr">methods</span>: &#123;</span><br><span class="line">                <span class="title function_">change</span>(<span class="params"></span>) &#123;</span><br><span class="line">                    <span class="variable language_">this</span>.<span class="property">parentmsg</span> = <span class="string">&#x27;被修改了&#x27;</span></span><br><span class="line">                &#125;</span><br><span class="line">            &#125;</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>

<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;app&quot;</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">div</span>&gt;</span></span><br><span class="line">            &#123;&#123;pMsg&#125;&#125;</span><br><span class="line">        <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">        <span class="comment">&lt;!-- 加text属性传递给子组件 --&gt;</span></span><br><span class="line">        <span class="comment">&lt;!-- &lt;son-Comp text=&quot;我是写死的数据&quot;&gt;&lt;/son-Comp&gt; --&gt;</span></span><br><span class="line">        <span class="comment">&lt;!-- 绑定父组件的pMsg --&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">son-Comp</span> <span class="attr">:text</span>=<span class="string">&quot;pMsg&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">son-Comp</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br></pre></td></tr></table></figure></li>
</ol>
<script>
       Vue.component('sonComp', {
           data: function() {
               return {
                   "sMsg": "我是子组件数据"
               }
           },
           template: "<h1>undefined----undefined</h1>",
           // 只读属性
           props: ["text"]
       })
       new Vue({
           el: "#app",
           data: {
               "pMsg": "我是父组件数据"
           }
       })
   </script>

<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">2. 使用`v-bind`或简化指令，将数据传递到子组件中</span><br><span class="line"></span><br><span class="line">```html</span><br><span class="line">&lt;div id=&quot;app&quot;&gt;</span><br><span class="line">    &lt;!-- 父组件，可以在引用子组件的时候， 通过 属性绑定（v-bind:） 的形式, 把 需要传递给 子组件的数据，以属性绑定的形式，传递到子组件内部，供子组件使用 --&gt;</span><br><span class="line">    &lt;com1 :parentmsg=&quot;msg&quot;&gt;&lt;/com1&gt;</span><br><span class="line">&lt;/div&gt;</span><br></pre></td></tr></table></figure>

<h3 id="2-7-2-父组件向子组件传方法"><a href="#2-7-2-父组件向子组件传方法" class="headerlink" title="2.7.2 父组件向子组件传方法"></a>2.7.2 父组件向子组件传方法</h3><ol>
<li><p>组件定义</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">template</span> <span class="attr">id</span>=<span class="string">&quot;tmpl&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">h1</span>&gt;</span>这是子组件<span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;button&quot;</span> <span class="attr">value</span>=<span class="string">&quot;这是子组件中的按钮 - 点击它，触发 父组件传递过来的 func 方法&quot;</span> @<span class="attr">click</span>=<span class="string">&quot;myclick&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">template</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// 定义了一个字面量类型的 组件模板对象</span></span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">var</span> com2 = &#123;</span></span><br><span class="line"><span class="language-javascript">        <span class="attr">template</span>: <span class="string">&#x27;#tmpl&#x27;</span>, <span class="comment">// 通过指定了一个 Id, 表示 说，要去加载 这个指定Id的 template 元素中的内容，当作 组件的HTML结构</span></span></span><br><span class="line"><span class="language-javascript">        <span class="title function_">data</span>(<span class="params"></span>) &#123;</span></span><br><span class="line"><span class="language-javascript">            <span class="keyword">return</span> &#123;</span></span><br><span class="line"><span class="language-javascript">                <span class="attr">sonmsg</span>: &#123; <span class="attr">name</span>: <span class="string">&#x27;小头儿子&#x27;</span>, <span class="attr">age</span>: <span class="number">6</span> &#125;</span></span><br><span class="line"><span class="language-javascript">            &#125;</span></span><br><span class="line"><span class="language-javascript">        &#125;,</span></span><br><span class="line"><span class="language-javascript">        <span class="attr">methods</span>: &#123;</span></span><br><span class="line"><span class="language-javascript">            <span class="title function_">myclick</span>(<span class="params"></span>) &#123;</span></span><br><span class="line"><span class="language-javascript">                <span class="comment">// 当点击子组件的按钮的时候，如何 拿到 父组件传递过来的 func 方法，并调用这个方法？？？</span></span></span><br><span class="line"><span class="language-javascript">                <span class="comment">//  emit 英文原意： 是触发，调用、发射的意思</span></span></span><br><span class="line"><span class="language-javascript">                <span class="comment">// this.$emit(&#x27;func123&#x27;, 123, 456)</span></span></span><br><span class="line"><span class="language-javascript">                <span class="variable language_">this</span>.$emit(<span class="string">&#x27;func&#x27;</span>, <span class="variable language_">this</span>.<span class="property">sonmsg</span>)</span></span><br><span class="line"><span class="language-javascript">            &#125;</span></span><br><span class="line"><span class="language-javascript">        &#125;</span></span><br><span class="line"><span class="language-javascript">    &#125;</span></span><br></pre></td></tr></table></figure>

<pre><code>// 创建 Vue 实例，得到 ViewModel
var vm = new Vue(&#123;
    el: &#39;#app&#39;,
    data: &#123;
        datamsgFormSon: null
    &#125;,
    methods: &#123;
        show(data) &#123;
            console.log(&#39;调用了父组件身上的 show 方法: --- &#39; + data)
            console.log(data);
            this.datamsgFormSon = data
        &#125;
    &#125;,

    components: &#123;
        com2
        // com2: com2
    &#125;
&#125;);
</code></pre>
<p></script></p>
</li>
</ol>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">2. 页面传递调用</span><br><span class="line"></span><br><span class="line">```html</span><br><span class="line">&lt;div id=&quot;app&quot;&gt;</span><br><span class="line">    &lt;!-- 父组件向子组件 传递 方法，使用的是 事件绑定机制； v-on, 当我们自定义了 一个 事件属性之后，那么，子组件就能够，通过某些方式，来调用 传递进去的 这个 方法了 --&gt;</span><br><span class="line">    &lt;com2 @func=&quot;show&quot;&gt;&lt;/com2&gt;</span><br><span class="line">&lt;/div&gt;</span><br></pre></td></tr></table></figure>

<h3 id="2-7-3-子组件向父组件传值"><a href="#2-7-3-子组件向父组件传值" class="headerlink" title="2.7.3 子组件向父组件传值"></a>2.7.3 子组件向父组件传值</h3><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;app&quot;</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">div</span>&gt;</span></span><br><span class="line">            &#123;&#123;pMsg&#125;&#125;</span><br><span class="line">        <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">        <span class="comment">&lt;!-- 可以写为@say=&quot;handle($event)&quot;,$event接受参数 --&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">son-Comp</span> @<span class="attr">say</span>=<span class="string">&quot;handle&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">son-Comp</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">/**</span></span></span><br><span class="line"><span class="comment"><span class="language-javascript">   * 子组件传递值给父组件</span></span></span><br><span class="line"><span class="comment"><span class="language-javascript">   *    1. 子组件通过$emit自定义事件向父组件传递数据</span></span></span><br><span class="line"><span class="comment"><span class="language-javascript">   *    2. 父组件监听子组件的事件</span></span></span><br><span class="line"><span class="comment"><span class="language-javascript">   */</span></span></span><br><span class="line"><span class="language-javascript">    <span class="title class_">Vue</span>.<span class="title function_">component</span>(<span class="string">&#x27;sonComp&#x27;</span>, &#123;</span></span><br><span class="line"><span class="language-javascript">        <span class="attr">data</span>: <span class="keyword">function</span>(<span class="params"></span>) &#123;</span></span><br><span class="line"><span class="language-javascript">            <span class="keyword">return</span> &#123;</span></span><br><span class="line"><span class="language-javascript">                <span class="string">&quot;sMsg&quot;</span>: <span class="string">&quot;我是子组件数据&quot;</span></span></span><br><span class="line"><span class="language-javascript">            &#125;</span></span><br><span class="line"><span class="language-javascript">        &#125;,</span></span><br><span class="line"><span class="language-javascript">        <span class="attr">template</span>: <span class="string">`</span></span></span><br><span class="line"><span class="string"><span class="language-javascript">                &lt;button @click=&#x27;$emit(&quot;say&quot;,sMsg)&#x27;&gt;点击我一下试一试&lt;/button&gt;</span></span></span><br><span class="line"><span class="string"><span class="language-javascript">                `</span>,</span></span><br><span class="line"><span class="language-javascript">        <span class="comment">// 只读属性,单向数据流,只允许父组件向子组件操作数据,不允许子组件直接操作props的数据</span></span></span><br><span class="line"><span class="language-javascript">        <span class="comment">// 如果子组件直接操作prop的数据,逻辑比较麻烦,不好控制</span></span></span><br><span class="line"><span class="language-javascript">    &#125;)</span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">new</span> <span class="title class_">Vue</span>(&#123;</span></span><br><span class="line"><span class="language-javascript">        <span class="attr">el</span>: <span class="string">&quot;#app&quot;</span>,</span></span><br><span class="line"><span class="language-javascript">        <span class="attr">data</span>: &#123;</span></span><br><span class="line"><span class="language-javascript">            <span class="string">&quot;pMsg&quot;</span>: <span class="string">&quot;我是父组件数据&quot;</span></span></span><br><span class="line"><span class="language-javascript">        &#125;,</span></span><br><span class="line"><span class="language-javascript">        <span class="attr">methods</span>: &#123;</span></span><br><span class="line"><span class="language-javascript">            <span class="attr">handle</span>: <span class="keyword">function</span>(<span class="params">sMsg</span>) &#123;</span></span><br><span class="line"><span class="language-javascript">                <span class="variable language_">console</span>.<span class="title function_">log</span>(sMsg)</span></span><br><span class="line"><span class="language-javascript">                <span class="comment">// 将子组件的sMsg数据赋值给父组件的pMsg</span></span></span><br><span class="line"><span class="language-javascript">                <span class="variable language_">this</span>.<span class="property">pMsg</span> = sMsg</span></span><br><span class="line"><span class="language-javascript">            &#125; </span></span><br><span class="line"><span class="language-javascript">        &#125;</span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">    &#125;)</span></span><br><span class="line"><span class="language-javascript"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h3 id="2-7-4-兄弟组件传值"><a href="#2-7-4-兄弟组件传值" class="headerlink" title="2.7.4 兄弟组件传值"></a>2.7.4 兄弟组件传值</h3><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;app&quot;</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">div</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">h1</span>&gt;</span>&#123;&#123;pMsg&#125;&#125;<span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">comp1</span>&gt;</span><span class="tag">&lt;/<span class="name">comp1</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">comp2</span>&gt;</span><span class="tag">&lt;/<span class="name">comp2</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">/**</span></span></span><br><span class="line"><span class="comment"><span class="language-javascript">   * 兄弟之间传值</span></span></span><br><span class="line"><span class="comment"><span class="language-javascript">   *    1. vue提供单独的事件中心管理组件进行通信</span></span></span><br><span class="line"><span class="comment"><span class="language-javascript">   *    2. 单独new Vue()实例作为事件中心</span></span></span><br><span class="line"><span class="comment"><span class="language-javascript">   *    3. 通过$on进行监听事件和$off进行销毁事件</span></span></span><br><span class="line"><span class="comment"><span class="language-javascript">   *    4. 通过$emit触发事件</span></span></span><br><span class="line"><span class="comment"><span class="language-javascript">   */</span></span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// 提供事件中心</span></span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">const</span> hub = <span class="keyword">new</span> <span class="title class_">Vue</span>()</span></span><br><span class="line"><span class="language-javascript">    <span class="title class_">Vue</span>.<span class="title function_">component</span>(<span class="string">&#x27;comp1&#x27;</span>, &#123;</span></span><br><span class="line"><span class="language-javascript">        <span class="attr">data</span>: <span class="keyword">function</span>(<span class="params"></span>) &#123;</span></span><br><span class="line"><span class="language-javascript">            <span class="keyword">return</span> &#123;</span></span><br><span class="line"><span class="language-javascript">                <span class="attr">msg1</span>: <span class="string">&quot;我是兄弟1数据&quot;</span>,</span></span><br><span class="line"><span class="language-javascript">                <span class="attr">data1</span>: <span class="number">11111111111</span></span></span><br><span class="line"><span class="language-javascript">            &#125;</span></span><br><span class="line"><span class="language-javascript">        &#125;,</span></span><br><span class="line"><span class="language-javascript">        <span class="attr">template</span>: <span class="string">`&lt;div&gt;&lt;h2&gt;&#123;&#123;data1&#125;&#125;&lt;/h2&gt;&lt;button @click=&quot;handle&quot;&gt;点击&lt;/button&gt;&lt;/div&gt;`</span>,</span></span><br><span class="line"><span class="language-javascript">        <span class="attr">methods</span>: &#123;</span></span><br><span class="line"><span class="language-javascript">            <span class="attr">handle</span>: <span class="keyword">function</span>(<span class="params"></span>)&#123;</span></span><br><span class="line"><span class="language-javascript">                <span class="comment">// 触发兄弟组件comp1的事件</span></span></span><br><span class="line"><span class="language-javascript">                hub.$emit(<span class="string">&quot;comp2-event&quot;</span>,&#123;</span></span><br><span class="line"><span class="language-javascript">                    <span class="attr">msg</span>: <span class="variable language_">this</span>.<span class="property">msg1</span>,</span></span><br><span class="line"><span class="language-javascript">                    <span class="attr">newVal</span>: <span class="variable language_">this</span>.<span class="property">data1</span></span></span><br><span class="line"><span class="language-javascript">                &#125;)</span></span><br><span class="line"><span class="language-javascript">            &#125;</span></span><br><span class="line"><span class="language-javascript">        &#125;,</span></span><br><span class="line"><span class="language-javascript">        <span class="attr">mounted</span>: <span class="keyword">function</span>(<span class="params"></span>)&#123;</span></span><br><span class="line"><span class="language-javascript">            <span class="comment">// vue的生命周期,模板渲染完后执行,监听事件</span></span></span><br><span class="line"><span class="language-javascript">            hub.$on(<span class="string">&quot;comp1-event&quot;</span>,<span class="function">(<span class="params">val</span>) =&gt;</span> &#123;</span></span><br><span class="line"><span class="language-javascript">                <span class="variable language_">console</span>.<span class="title function_">log</span>(val.<span class="property">msg</span>);</span></span><br><span class="line"><span class="language-javascript">                <span class="variable language_">console</span>.<span class="title function_">log</span>(val.<span class="property">newVal</span>);</span></span><br><span class="line"><span class="language-javascript">                <span class="variable language_">this</span>.<span class="property">data1</span>=val.<span class="property">newVal</span>;</span></span><br><span class="line"><span class="language-javascript">            &#125;) </span></span><br><span class="line"><span class="language-javascript">        &#125;</span></span><br><span class="line"><span class="language-javascript">    &#125;)</span></span><br><span class="line"><span class="language-javascript">    <span class="title class_">Vue</span>.<span class="title function_">component</span>(<span class="string">&#x27;comp2&#x27;</span>, &#123;</span></span><br><span class="line"><span class="language-javascript">        <span class="attr">data</span>: <span class="keyword">function</span>(<span class="params"></span>) &#123;</span></span><br><span class="line"><span class="language-javascript">            <span class="keyword">return</span> &#123;</span></span><br><span class="line"><span class="language-javascript">                <span class="attr">msg2</span>: <span class="string">&quot;我是兄弟2数据&quot;</span>,</span></span><br><span class="line"><span class="language-javascript">                <span class="attr">data2</span>: <span class="number">22222222</span></span></span><br><span class="line"><span class="language-javascript">            &#125;</span></span><br><span class="line"><span class="language-javascript">        &#125;,</span></span><br><span class="line"><span class="language-javascript">        <span class="attr">template</span>: <span class="string">`&lt;div&gt;&lt;h2&gt;&#123;&#123;data2&#125;&#125;&lt;/h2&gt;&lt;button @click=&quot;handle&quot;&gt;点击&lt;/button&gt;&lt;/div&gt;`</span>,</span></span><br><span class="line"><span class="language-javascript">        <span class="attr">methods</span>: &#123;</span></span><br><span class="line"><span class="language-javascript">            <span class="attr">handle</span>: <span class="keyword">function</span>(<span class="params"></span>)&#123;</span></span><br><span class="line"><span class="language-javascript">                <span class="comment">// 触发兄弟组件comp2的事件</span></span></span><br><span class="line"><span class="language-javascript">                hub.$emit(<span class="string">&quot;comp1-event&quot;</span>,&#123;</span></span><br><span class="line"><span class="language-javascript">                    <span class="attr">msg</span>:<span class="variable language_">this</span>.<span class="property">msg2</span>,</span></span><br><span class="line"><span class="language-javascript">                    <span class="attr">newVal</span>: <span class="variable language_">this</span>.<span class="property">data2</span></span></span><br><span class="line"><span class="language-javascript">                &#125;)</span></span><br><span class="line"><span class="language-javascript">            &#125;</span></span><br><span class="line"><span class="language-javascript">        &#125;,</span></span><br><span class="line"><span class="language-javascript">        <span class="attr">mounted</span>: <span class="keyword">function</span>(<span class="params"></span>)&#123;</span></span><br><span class="line"><span class="language-javascript">            <span class="comment">// vue的生命周期,模板渲染完后执行,监听事件</span></span></span><br><span class="line"><span class="language-javascript">            hub.$on(<span class="string">&quot;comp2-event&quot;</span>,<span class="function">(<span class="params">val</span>) =&gt;</span> &#123;</span></span><br><span class="line"><span class="language-javascript">                <span class="variable language_">console</span>.<span class="title function_">log</span>(val.<span class="property">msg</span>);</span></span><br><span class="line"><span class="language-javascript">                <span class="variable language_">console</span>.<span class="title function_">log</span>(val.<span class="property">newVal</span>);</span></span><br><span class="line"><span class="language-javascript">                <span class="variable language_">this</span>.<span class="property">data2</span>=val.<span class="property">newVal</span>;</span></span><br><span class="line"><span class="language-javascript">            &#125;) </span></span><br><span class="line"><span class="language-javascript">        &#125;</span></span><br><span class="line"><span class="language-javascript">    &#125;)</span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">new</span> <span class="title class_">Vue</span>(&#123;</span></span><br><span class="line"><span class="language-javascript">        <span class="attr">el</span>: <span class="string">&quot;#app&quot;</span>,</span></span><br><span class="line"><span class="language-javascript">        <span class="attr">data</span>: &#123;</span></span><br><span class="line"><span class="language-javascript">            <span class="string">&quot;pMsg&quot;</span>: <span class="string">&quot;我是父组件数据&quot;</span></span></span><br><span class="line"><span class="language-javascript">        &#125;</span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">    &#125;)</span></span><br><span class="line"><span class="language-javascript"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h3 id="2-7-4-组件插槽"><a href="#2-7-4-组件插槽" class="headerlink" title="2.7.4 组件插槽"></a>2.7.4 组件插槽</h3><p>父组件向子组件传递模板内容</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;app&quot;</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">comp1</span>&gt;</span>中国必胜<span class="tag">&lt;/<span class="name">comp1</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">comp2</span>&gt;</span><span class="tag">&lt;/<span class="name">comp2</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">    <span class="title class_">Vue</span>.<span class="title function_">component</span>(<span class="string">&#x27;comp1&#x27;</span>, &#123;</span></span><br><span class="line"><span class="language-javascript">        <span class="attr">data</span>: <span class="keyword">function</span>(<span class="params"></span>) &#123;</span></span><br><span class="line"><span class="language-javascript">            <span class="keyword">return</span> &#123;</span></span><br><span class="line"><span class="language-javascript">            &#125;</span></span><br><span class="line"><span class="language-javascript">        &#125;,</span></span><br><span class="line"><span class="language-javascript">        <span class="attr">template</span>: <span class="string">`&lt;div&gt;&lt;strong&gt;武汉加油:&lt;/strong&gt;&lt;slot&gt;&lt;/slot&gt;&lt;/div&gt;`</span>,</span></span><br><span class="line"><span class="language-javascript">    &#125;)</span></span><br><span class="line"><span class="language-javascript">    <span class="title class_">Vue</span>.<span class="title function_">component</span>(<span class="string">&#x27;comp2&#x27;</span>, &#123;</span></span><br><span class="line"><span class="language-javascript">        <span class="attr">data</span>: <span class="keyword">function</span>(<span class="params"></span>) &#123;</span></span><br><span class="line"><span class="language-javascript">            <span class="keyword">return</span> &#123;</span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">            &#125;</span></span><br><span class="line"><span class="language-javascript">        &#125;,</span></span><br><span class="line"><span class="language-javascript">        <span class="attr">template</span>: <span class="string">`&lt;div&gt;&lt;strong&gt;来个默认值:&lt;/strong&gt;&lt;slot&gt;我是默认内容&lt;/slot&gt;&lt;/div&gt;`</span>,</span></span><br><span class="line"><span class="language-javascript">    &#125;)</span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">new</span> <span class="title class_">Vue</span>(&#123;</span></span><br><span class="line"><span class="language-javascript">        <span class="attr">el</span>: <span class="string">&quot;#app&quot;</span>,</span></span><br><span class="line"><span class="language-javascript">        <span class="attr">data</span>: &#123;</span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">        &#125;</span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">    &#125;)</span></span><br><span class="line"><span class="language-javascript"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h2 id="2-8-获取DOM元素和组件引用"><a href="#2-8-获取DOM元素和组件引用" class="headerlink" title="2.8 获取DOM元素和组件引用"></a>2.8 获取DOM元素和组件引用</h2><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;app&quot;</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;button&quot;</span> <span class="attr">value</span>=<span class="string">&quot;获取元素&quot;</span> @<span class="attr">click</span>=<span class="string">&quot;getElement&quot;</span> <span class="attr">ref</span>=<span class="string">&quot;mybtn&quot;</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">h3</span> <span class="attr">id</span>=<span class="string">&quot;myh3&quot;</span> <span class="attr">ref</span>=<span class="string">&quot;myh3&quot;</span>&gt;</span>哈哈哈， 今天天气太好了！！！<span class="tag">&lt;/<span class="name">h3</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">hr</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">login</span> <span class="attr">ref</span>=<span class="string">&quot;mylogin&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">login</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"></span><br><span class="line">    <span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">        <span class="keyword">var</span> login = &#123;</span></span><br><span class="line"><span class="language-javascript">            <span class="attr">template</span>: <span class="string">&#x27;&lt;h1&gt;登录组件&lt;/h1&gt;&#x27;</span>,</span></span><br><span class="line"><span class="language-javascript">            <span class="title function_">data</span>(<span class="params"></span>) &#123;</span></span><br><span class="line"><span class="language-javascript">                <span class="keyword">return</span> &#123;</span></span><br><span class="line"><span class="language-javascript">                    <span class="attr">msg</span>: <span class="string">&#x27;son msg&#x27;</span></span></span><br><span class="line"><span class="language-javascript">                &#125;</span></span><br><span class="line"><span class="language-javascript">            &#125;,</span></span><br><span class="line"><span class="language-javascript">            <span class="attr">methods</span>: &#123;</span></span><br><span class="line"><span class="language-javascript">                <span class="title function_">show</span>(<span class="params"></span>) &#123;</span></span><br><span class="line"><span class="language-javascript">                    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;调用了子组件的方法&#x27;</span>)</span></span><br><span class="line"><span class="language-javascript">                &#125;</span></span><br><span class="line"><span class="language-javascript">            &#125;</span></span><br><span class="line"><span class="language-javascript">        &#125;</span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">        <span class="comment">// 创建 Vue 实例，得到 ViewModel</span></span></span><br><span class="line"><span class="language-javascript">        <span class="keyword">var</span> vm = <span class="keyword">new</span> <span class="title class_">Vue</span>(&#123;</span></span><br><span class="line"><span class="language-javascript">            <span class="attr">el</span>: <span class="string">&#x27;#app&#x27;</span>,</span></span><br><span class="line"><span class="language-javascript">            <span class="attr">data</span>: &#123;&#125;,</span></span><br><span class="line"><span class="language-javascript">            <span class="attr">methods</span>: &#123;</span></span><br><span class="line"><span class="language-javascript">                <span class="title function_">getElement</span>(<span class="params"></span>) &#123;</span></span><br><span class="line"><span class="language-javascript">                    <span class="comment">// console.log(document.getElementById(&#x27;myh3&#x27;).innerText)</span></span></span><br><span class="line"><span class="language-javascript">                    <span class="comment">//  ref  是 英文单词 【reference】   值类型 和 引用类型  referenceError</span></span></span><br><span class="line"><span class="language-javascript">                    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="variable language_">this</span>.<span class="property">$refs</span>.<span class="property">myh3</span>.<span class="property">innerText</span>)</span></span><br><span class="line"><span class="language-javascript">                    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="variable language_">this</span>.<span class="property">$refs</span>.<span class="property">mylogin</span>.<span class="property">msg</span>)</span></span><br><span class="line"><span class="language-javascript">                    <span class="variable language_">this</span>.<span class="property">$refs</span>.<span class="property">mylogin</span>.<span class="title function_">show</span>()</span></span><br><span class="line"><span class="language-javascript">                &#125;</span></span><br><span class="line"><span class="language-javascript">            &#125;,</span></span><br><span class="line"><span class="language-javascript">            <span class="attr">components</span>: &#123;</span></span><br><span class="line"><span class="language-javascript">                login</span></span><br><span class="line"><span class="language-javascript">            &#125;</span></span><br><span class="line"><span class="language-javascript">        &#125;);</span></span><br><span class="line"><span class="language-javascript">    </span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h2 id="2-9-组件综合练习"><a href="#2-9-组件综合练习" class="headerlink" title="2.9 组件综合练习"></a>2.9 组件综合练习</h2><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span> <span class="attr">lang</span>=<span class="string">&quot;en&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">&quot;UTF-8&quot;</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">meta</span> <span class="attr">name</span>=<span class="string">&quot;viewport&quot;</span> <span class="attr">content</span>=<span class="string">&quot;width=device-width, initial-scale=1.0&quot;</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">meta</span> <span class="attr">http-equiv</span>=<span class="string">&quot;X-UA-Compatible&quot;</span> <span class="attr">content</span>=<span class="string">&quot;ie=edge&quot;</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">title</span>&gt;</span>Document<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">&quot;https://cdn.jsdelivr.net/npm/vue&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">link</span> <span class="attr">href</span>=<span class="string">&quot;https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css&quot;</span> <span class="attr">rel</span>=<span class="string">&quot;stylesheet&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"></span><br><span class="line">    <span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;app&quot;</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">cmt-box</span> @<span class="attr">func</span>=<span class="string">&quot;loadComments&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">cmt-box</span>&gt;</span></span><br><span class="line"></span><br><span class="line">            <span class="tag">&lt;<span class="name">ul</span> <span class="attr">class</span>=<span class="string">&quot;list-group&quot;</span>&gt;</span></span><br><span class="line">                <span class="tag">&lt;<span class="name">li</span> <span class="attr">class</span>=<span class="string">&quot;list-group-item&quot;</span> <span class="attr">v-for</span>=<span class="string">&quot;item in list&quot;</span> <span class="attr">:key</span>=<span class="string">&quot;item.id&quot;</span>&gt;</span></span><br><span class="line">                    <span class="tag">&lt;<span class="name">span</span> <span class="attr">class</span>=<span class="string">&quot;badge&quot;</span>&gt;</span>评论人： &#123;&#123; item.user &#125;&#125;<span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br><span class="line">                    &#123;&#123; item.content &#125;&#125;</span><br><span class="line">                <span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;/<span class="name">ul</span>&gt;</span></span><br><span class="line"></span><br><span class="line">        <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"></span><br><span class="line">        <span class="tag">&lt;<span class="name">template</span> <span class="attr">id</span>=<span class="string">&quot;tmpl&quot;</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">div</span>&gt;</span></span><br><span class="line"></span><br><span class="line">                <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;form-group&quot;</span>&gt;</span></span><br><span class="line">                    <span class="tag">&lt;<span class="name">label</span>&gt;</span>评论人：<span class="tag">&lt;/<span class="name">label</span>&gt;</span></span><br><span class="line">                    <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;text&quot;</span> <span class="attr">class</span>=<span class="string">&quot;form-control&quot;</span> <span class="attr">v-model</span>=<span class="string">&quot;user&quot;</span>&gt;</span></span><br><span class="line">                <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"></span><br><span class="line">                <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;form-group&quot;</span>&gt;</span></span><br><span class="line">                    <span class="tag">&lt;<span class="name">label</span>&gt;</span>评论内容：<span class="tag">&lt;/<span class="name">label</span>&gt;</span></span><br><span class="line">                    <span class="tag">&lt;<span class="name">textarea</span> <span class="attr">class</span>=<span class="string">&quot;form-control&quot;</span> <span class="attr">v-model</span>=<span class="string">&quot;content&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">textarea</span>&gt;</span></span><br><span class="line">                <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"></span><br><span class="line">                <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;form-group&quot;</span>&gt;</span></span><br><span class="line">                    <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;button&quot;</span> <span class="attr">value</span>=<span class="string">&quot;发表评论&quot;</span> <span class="attr">class</span>=<span class="string">&quot;btn btn-primary&quot;</span> @<span class="attr">click</span>=<span class="string">&quot;postComment&quot;</span>&gt;</span></span><br><span class="line">                <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"></span><br><span class="line">            <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;/<span class="name">template</span>&gt;</span></span><br><span class="line"></span><br><span class="line">        <span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">            <span class="keyword">var</span> commentBox = &#123;</span></span><br><span class="line"><span class="language-javascript">                <span class="title function_">data</span>(<span class="params"></span>) &#123;</span></span><br><span class="line"><span class="language-javascript">                    <span class="keyword">return</span> &#123;</span></span><br><span class="line"><span class="language-javascript">                        <span class="attr">user</span>: <span class="string">&#x27;&#x27;</span>,</span></span><br><span class="line"><span class="language-javascript">                        <span class="attr">content</span>: <span class="string">&#x27;&#x27;</span></span></span><br><span class="line"><span class="language-javascript">                    &#125;</span></span><br><span class="line"><span class="language-javascript">                &#125;,</span></span><br><span class="line"><span class="language-javascript">                <span class="attr">template</span>: <span class="string">&#x27;#tmpl&#x27;</span>,</span></span><br><span class="line"><span class="language-javascript">                <span class="attr">methods</span>: &#123;</span></span><br><span class="line"><span class="language-javascript">                    <span class="title function_">postComment</span>(<span class="params"></span>) &#123; <span class="comment">// 发表评论的方法</span></span></span><br><span class="line"><span class="language-javascript">                        <span class="comment">// 分析：发表评论的业务逻辑</span></span></span><br><span class="line"><span class="language-javascript">                        <span class="comment">// 1. 评论数据存到哪里去？？？   存放到了 localStorage 中  localStorage.setItem(&#x27;cmts&#x27;, &#x27;&#x27;)</span></span></span><br><span class="line"><span class="language-javascript">                        <span class="comment">// 2. 先组织出一个最新的评论数据对象</span></span></span><br><span class="line"><span class="language-javascript">                        <span class="comment">// 3. 想办法，把 第二步中，得到的评论对象，保存到 localStorage 中：</span></span></span><br><span class="line"><span class="language-javascript">                        <span class="comment">//  3.1 localStorage 只支持存放字符串数据， 要先调用 JSON.stringify </span></span></span><br><span class="line"><span class="language-javascript">                        <span class="comment">//  3.2 在保存 最新的 评论数据之前，要先从 localStorage 获取到之前的评论数据（string）， 转换为 一个  数组对象， 然后，把最新的评论， push 到这个数组</span></span></span><br><span class="line"><span class="language-javascript">                        <span class="comment">//  3.3 如果获取到的 localStorage 中的 评论字符串，为空不存在， 则  可以 返回一个 &#x27;[]&#x27;  让 JSON.parse 去转换</span></span></span><br><span class="line"><span class="language-javascript">                        <span class="comment">//  3.4  把 最新的  评论列表数组，再次调用 JSON.stringify 转为  数组字符串，然后调用 localStorage.setItem()</span></span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">                        <span class="keyword">var</span> comment = &#123; <span class="attr">id</span>: <span class="title class_">Date</span>.<span class="title function_">now</span>(), <span class="attr">user</span>: <span class="variable language_">this</span>.<span class="property">user</span>, <span class="attr">content</span>: <span class="variable language_">this</span>.<span class="property">content</span> &#125;</span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">                        <span class="comment">// 从 localStorage 中获取所有的评论</span></span></span><br><span class="line"><span class="language-javascript">                        <span class="keyword">var</span> list = <span class="title class_">JSON</span>.<span class="title function_">parse</span>(<span class="variable language_">localStorage</span>.<span class="title function_">getItem</span>(<span class="string">&#x27;cmts&#x27;</span>) || <span class="string">&#x27;[]&#x27;</span>)</span></span><br><span class="line"><span class="language-javascript">                        list.<span class="title function_">unshift</span>(comment)</span></span><br><span class="line"><span class="language-javascript">                        <span class="comment">// 重新保存最新的 评论数据</span></span></span><br><span class="line"><span class="language-javascript">                        <span class="variable language_">localStorage</span>.<span class="title function_">setItem</span>(<span class="string">&#x27;cmts&#x27;</span>, <span class="title class_">JSON</span>.<span class="title function_">stringify</span>(list))</span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">                        <span class="variable language_">this</span>.<span class="property">user</span> = <span class="variable language_">this</span>.<span class="property">content</span> = <span class="string">&#x27;&#x27;</span></span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">                        <span class="comment">// this.loadComments() // ?????</span></span></span><br><span class="line"><span class="language-javascript">                        <span class="variable language_">this</span>.$emit(<span class="string">&#x27;func&#x27;</span>)</span></span><br><span class="line"><span class="language-javascript">                    &#125;</span></span><br><span class="line"><span class="language-javascript">                &#125;</span></span><br><span class="line"><span class="language-javascript">            &#125;</span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">            <span class="comment">// 创建 Vue 实例，得到 ViewModel</span></span></span><br><span class="line"><span class="language-javascript">            <span class="keyword">var</span> vm = <span class="keyword">new</span> <span class="title class_">Vue</span>(&#123;</span></span><br><span class="line"><span class="language-javascript">                <span class="attr">el</span>: <span class="string">&#x27;#app&#x27;</span>,</span></span><br><span class="line"><span class="language-javascript">                <span class="attr">data</span>: &#123;</span></span><br><span class="line"><span class="language-javascript">                    <span class="attr">list</span>: [</span></span><br><span class="line"><span class="language-javascript">                        &#123; <span class="attr">id</span>: <span class="title class_">Date</span>.<span class="title function_">now</span>(), <span class="attr">user</span>: <span class="string">&#x27;李白&#x27;</span>, <span class="attr">content</span>: <span class="string">&#x27;天生我材必有用&#x27;</span> &#125;,</span></span><br><span class="line"><span class="language-javascript">                        &#123; <span class="attr">id</span>: <span class="title class_">Date</span>.<span class="title function_">now</span>(), <span class="attr">user</span>: <span class="string">&#x27;江小白&#x27;</span>, <span class="attr">content</span>: <span class="string">&#x27;劝君更尽一杯酒&#x27;</span> &#125;,</span></span><br><span class="line"><span class="language-javascript">                        &#123; <span class="attr">id</span>: <span class="title class_">Date</span>.<span class="title function_">now</span>(), <span class="attr">user</span>: <span class="string">&#x27;小马&#x27;</span>, <span class="attr">content</span>: <span class="string">&#x27;我姓马， 风吹草低见牛羊的马&#x27;</span> &#125;</span></span><br><span class="line"><span class="language-javascript">                    ]</span></span><br><span class="line"><span class="language-javascript">                &#125;,</span></span><br><span class="line"><span class="language-javascript">                <span class="title function_">beforeCreate</span>(<span class="params"></span>)&#123; <span class="comment">// 注意：这里不能调用 loadComments 方法，因为在执行这个钩子函数的时候，data 和 methods 都还没有被初始化好</span></span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">                &#125;,</span></span><br><span class="line"><span class="language-javascript">                <span class="title function_">created</span>(<span class="params"></span>)&#123;</span></span><br><span class="line"><span class="language-javascript">                    <span class="variable language_">this</span>.<span class="title function_">loadComments</span>()</span></span><br><span class="line"><span class="language-javascript">                &#125;,</span></span><br><span class="line"><span class="language-javascript">                <span class="attr">methods</span>: &#123;</span></span><br><span class="line"><span class="language-javascript">                    <span class="title function_">loadComments</span>(<span class="params"></span>) &#123; <span class="comment">// 从本地的 localStorage 中，加载评论列表</span></span></span><br><span class="line"><span class="language-javascript">                        <span class="keyword">var</span> list = <span class="title class_">JSON</span>.<span class="title function_">parse</span>(<span class="variable language_">localStorage</span>.<span class="title function_">getItem</span>(<span class="string">&#x27;cmts&#x27;</span>) || <span class="string">&#x27;[]&#x27;</span>)</span></span><br><span class="line"><span class="language-javascript">                        <span class="variable language_">this</span>.<span class="property">list</span> = list</span></span><br><span class="line"><span class="language-javascript">                    &#125;</span></span><br><span class="line"><span class="language-javascript">                &#125;,</span></span><br><span class="line"><span class="language-javascript">                <span class="attr">components</span>: &#123;</span></span><br><span class="line"><span class="language-javascript">                    <span class="string">&#x27;cmt-box&#x27;</span>: commentBox</span></span><br><span class="line"><span class="language-javascript">                &#125;</span></span><br><span class="line"><span class="language-javascript">            &#125;);</span></span><br><span class="line"><span class="language-javascript">        </span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h1 id="3-Vue-Router"><a href="#3-Vue-Router" class="headerlink" title="3. Vue Router"></a>3. Vue Router</h1><h2 id="3-1-路由定义"><a href="#3-1-路由定义" class="headerlink" title="3.1 路由定义"></a>3.1 路由定义</h2><ol>
<li><strong>后端路由：</strong>对于普通的网站，所有的超链接都是URL地址，所有的URL地址都对应服务器上对应的资源；</li>
<li><strong>前端路由：</strong>对于单页面应用程序来说，主要通过URL中的hash(#号)来实现不同页面之间的切换，同时，hash有一个特点：HTTP请求中不会包含hash相关的内容；所以，单页面程序中的页面跳转主要用hash实现；</li>
<li>在单页面应用程序中，这种通过hash改变来切换页面的方式，称作前端路由（区别于后端路由）；</li>
</ol>
<h2 id="3-2-vue-router基本用法"><a href="#3-2-vue-router基本用法" class="headerlink" title="3.2  vue-router基本用法"></a>3.2  vue-router基本用法</h2><ol>
<li><p>导入 vue-router 组件类库</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">&lt;!-- 0. 安装 vue由模块,路由的前置条件，如果在路由模块后面导入，则路由模块会失效 --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">&quot;https://cdn.jsdelivr.net/npm/vue&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="comment">&lt;!-- 1. 安装 vue-router 路由模块 --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">&quot;https://cdn.bootcss.com/vue-router/3.1.3/vue-router.js&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure></li>
<li><p>定义样式</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">style</span>&gt;</span><span class="language-css"></span></span><br><span class="line"><span class="language-css">    <span class="comment">/* Vue路由自带的类 */</span></span></span><br><span class="line"><span class="language-css">    <span class="selector-class">.router-link-active</span>,</span></span><br><span class="line"><span class="language-css">    <span class="comment">/* 自定义的类 */</span></span></span><br><span class="line"><span class="language-css">    <span class="selector-class">.myactive</span> &#123;</span></span><br><span class="line"><span class="language-css">        <span class="attribute">color</span>: red;</span></span><br><span class="line"><span class="language-css">        <span class="attribute">font-weight</span>: <span class="number">800</span>;</span></span><br><span class="line"><span class="language-css">        <span class="attribute">font-style</span>: italic;</span></span><br><span class="line"><span class="language-css">        <span class="attribute">font-size</span>: <span class="number">80px</span>;</span></span><br><span class="line"><span class="language-css">        <span class="attribute">text-decoration</span>: underline;</span></span><br><span class="line"><span class="language-css">        <span class="attribute">background-color</span>: green;</span></span><br><span class="line"><span class="language-css">    &#125;</span></span><br><span class="line"><span class="language-css"></span></span><br><span class="line"><span class="language-css">    <span class="selector-class">.v-enter</span>,</span></span><br><span class="line"><span class="language-css">    <span class="selector-class">.v-leave-to</span> &#123;</span></span><br><span class="line"><span class="language-css">        <span class="attribute">opacity</span>: <span class="number">0</span>;</span></span><br><span class="line"><span class="language-css">        <span class="attribute">transform</span>: <span class="built_in">translateX</span>(<span class="number">140px</span>);</span></span><br><span class="line"><span class="language-css">    &#125;</span></span><br><span class="line"><span class="language-css"></span></span><br><span class="line"><span class="language-css">    <span class="selector-class">.v-enter-active</span>,</span></span><br><span class="line"><span class="language-css">    <span class="selector-class">.v-leave-active</span> &#123;</span></span><br><span class="line"><span class="language-css">        <span class="attribute">transition</span>: all <span class="number">0.5s</span> ease;</span></span><br><span class="line"><span class="language-css">    &#125;</span></span><br><span class="line"><span class="language-css"></span><span class="tag">&lt;/<span class="name">style</span>&gt;</span></span><br></pre></td></tr></table></figure></li>
<li><p>使用 router-link 组件来导航</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;app&quot;</span>&gt;</span></span><br><span class="line"></span><br><span class="line">    <span class="comment">&lt;!-- &lt;a href=&quot;#/login&quot;&gt;登录&lt;/a&gt; --&gt;</span></span><br><span class="line">    <span class="comment">&lt;!-- &lt;a href=&quot;#/register&quot;&gt;注册&lt;/a&gt; --&gt;</span></span><br><span class="line"></span><br><span class="line">    <span class="comment">&lt;!-- router-link 默认渲染为一个a 标签 --&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">router-link</span> <span class="attr">to</span>=<span class="string">&quot;/login&quot;</span> <span class="attr">tag</span>=<span class="string">&quot;span&quot;</span>&gt;</span>登录<span class="tag">&lt;/<span class="name">router-link</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">router-link</span> <span class="attr">to</span>=<span class="string">&quot;/register&quot;</span>&gt;</span>注册<span class="tag">&lt;/<span class="name">router-link</span>&gt;</span></span><br><span class="line"></span><br><span class="line">    <span class="comment">&lt;!-- 这是 vue-router 提供的元素，专门用来 当作占位符的，将来，路由规则，匹配到的组件，就会展示到这个 router-view 中去 --&gt;</span></span><br><span class="line">    <span class="comment">&lt;!-- 所以： 我们可以把 router-view 认为是一个占位符 --&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">transition</span> <span class="attr">mode</span>=<span class="string">&quot;out-in&quot;</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">router-view</span>&gt;</span><span class="tag">&lt;/<span class="name">router-view</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">transition</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure></li>
<li><p>创建组件模板</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 组件的模板对象</span></span><br><span class="line"><span class="keyword">var</span> login = &#123;</span><br><span class="line">    <span class="attr">template</span>: <span class="string">&#x27;&lt;h1&gt;登录组件&lt;/h1&gt;&#x27;</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> register = &#123;</span><br><span class="line">    <span class="attr">template</span>: <span class="string">&#x27;&lt;h1&gt;注册组件&lt;/h1&gt;&#x27;</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></li>
<li><p>创建路由router实例，病定义路由规则</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 2. 创建一个路由对象， 当 导入 vue-router 包之后，在 window 全局对象中，就有了一个 路由的构造函数，叫做 VueRouter</span></span><br><span class="line"><span class="comment">// 在 new 路由对象的时候，可以为 构造函数，传递一个配置对象</span></span><br><span class="line"><span class="keyword">var</span> routerObj = <span class="keyword">new</span> <span class="title class_">VueRouter</span>(&#123;</span><br><span class="line">    <span class="comment">// route // 这个配置对象中的 route 表示 【路由匹配规则】 的意思</span></span><br><span class="line">    <span class="attr">routes</span>: [ <span class="comment">// 路由匹配规则 </span></span><br><span class="line">        <span class="comment">// 每个路由规则，都是一个对象，这个规则对象，身上，有两个必须的属性：</span></span><br><span class="line">        <span class="comment">//  属性1 是 path， 表示监听 哪个路由链接地址；</span></span><br><span class="line">        <span class="comment">//  属性2 是 component， 表示，如果 路由是前面匹配到的 path ，则展示 component 属性对应的那个组件</span></span><br><span class="line">        <span class="comment">// 注意： component 的属性值，必须是一个 组件的模板对象， 不能是 组件的引用名称；</span></span><br><span class="line">        <span class="comment">// &#123; path: &#x27;/&#x27;, component: login &#125;,</span></span><br><span class="line">        &#123; <span class="attr">path</span>: <span class="string">&#x27;/&#x27;</span>, <span class="attr">redirect</span>: <span class="string">&#x27;/login&#x27;</span> &#125;, <span class="comment">// 这里的 redirect 和 Node、Java中的 redirect 完全是两码事</span></span><br><span class="line">        &#123; <span class="attr">path</span>: <span class="string">&#x27;/login&#x27;</span>, <span class="attr">component</span>: login &#125;,</span><br><span class="line">        &#123; <span class="attr">path</span>: <span class="string">&#x27;/register&#x27;</span>, <span class="attr">component</span>: register &#125;</span><br><span class="line">    ],</span><br><span class="line">    <span class="attr">linkActiveClass</span>: <span class="string">&#x27;myactive&#x27;</span> <span class="comment">// 路由高亮，可以自定义，也可以用vue路由自带的类.router-link-active定义样式，激活相关的类</span></span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure></li>
<li><p>使用router属性来使用路由规则</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 创建 Vue 实例，得到 ViewModel</span></span><br><span class="line"><span class="keyword">var</span> vm = <span class="keyword">new</span> <span class="title class_">Vue</span>(&#123;</span><br><span class="line">    <span class="attr">el</span>: <span class="string">&#x27;#app&#x27;</span>,</span><br><span class="line">    <span class="attr">data</span>: &#123;&#125;,</span><br><span class="line">    <span class="attr">methods</span>: &#123;&#125;,</span><br><span class="line">    <span class="attr">router</span>: routerObj <span class="comment">// 将路由规则对象，注册到 vm 实例上，用来监听 URL 地址的变化，然后展示对应的组件</span></span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure></li>
</ol>
<h2 id="3-3-路由规则中定义参数"><a href="#3-3-路由规则中定义参数" class="headerlink" title="3.3 路由规则中定义参数"></a>3.3 路由规则中定义参数</h2><h3 id="3-3-1-在规则中定义参数"><a href="#3-3-1-在规则中定义参数" class="headerlink" title="3.3.1  在规则中定义参数"></a>3.3.1  在规则中定义参数</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&#123; <span class="attr">path</span>: <span class="string">&#x27;/register/:id&#x27;</span>, <span class="attr">component</span>: register &#125;</span><br></pre></td></tr></table></figure>

<h3 id="3-3-2-this-route-params获取路由中的参数"><a href="#3-3-2-this-route-params获取路由中的参数" class="headerlink" title="3.3.2 this.$route.params获取路由中的参数"></a>3.3.2 <code>this.$route.params</code>获取路由中的参数</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> register = <span class="title class_">Vue</span>.<span class="title function_">extend</span>(&#123;</span><br><span class="line">    <span class="attr">template</span>: <span class="string">&#x27;&lt;h1&gt;注册组件 --- &#123;&#123;this.$route.params.id&#125;&#125;&lt;/h1&gt;&#x27;</span></span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>

<h3 id="3-3-3-使用查询字符串传递参数"><a href="#3-3-3-使用查询字符串传递参数" class="headerlink" title="3.3.3 使用查询字符串传递参数"></a>3.3.3 使用查询字符串传递参数</h3><ol>
<li><p>html代码</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;app&quot;</span>&gt;</span></span><br><span class="line">  <span class="comment">&lt;!-- 如果在路由中，使用 查询字符串，给路由传递参数，则 不需要修改 路由规则的 path 属性 --&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">router-link</span> <span class="attr">to</span>=<span class="string">&quot;/login?id=10&amp;name=zs&quot;</span>&gt;</span>登录<span class="tag">&lt;/<span class="name">router-link</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">router-link</span> <span class="attr">to</span>=<span class="string">&quot;/register&quot;</span>&gt;</span>注册<span class="tag">&lt;/<span class="name">router-link</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">router-view</span>&gt;</span><span class="tag">&lt;/<span class="name">router-view</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure></li>
<li><p>JavaScript代码</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">var</span> login = &#123;</span></span><br><span class="line"><span class="language-javascript">        <span class="attr">template</span>: <span class="string">&#x27;&lt;h1&gt;登录 --- &#123;&#123; $route.query.id &#125;&#125; --- &#123;&#123; $route.query.name &#125;&#125;&lt;/h1&gt;&#x27;</span>,</span></span><br><span class="line"><span class="language-javascript">        <span class="title function_">data</span>(<span class="params"></span>)&#123;</span></span><br><span class="line"><span class="language-javascript">            <span class="keyword">return</span> &#123;</span></span><br><span class="line"><span class="language-javascript">                <span class="attr">msg</span>: <span class="string">&#x27;123&#x27;</span></span></span><br><span class="line"><span class="language-javascript">            &#125;</span></span><br><span class="line"><span class="language-javascript">        &#125;,</span></span><br><span class="line"><span class="language-javascript">        <span class="title function_">created</span>(<span class="params"></span>)&#123; <span class="comment">// 组件的生命周期钩子函数</span></span></span><br><span class="line"><span class="language-javascript">            <span class="comment">// console.log(this.$route)</span></span></span><br><span class="line"><span class="language-javascript">            <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="variable language_">this</span>.<span class="property">$route</span>.<span class="property">query</span>.<span class="property">id</span>)</span></span><br><span class="line"><span class="language-javascript">        &#125;</span></span><br><span class="line"><span class="language-javascript">    &#125;</span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">var</span> register = &#123;</span></span><br><span class="line"><span class="language-javascript">        <span class="attr">template</span>: <span class="string">&#x27;&lt;h1&gt;注册&lt;/h1&gt;&#x27;</span></span></span><br><span class="line"><span class="language-javascript">    &#125;</span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">var</span> router = <span class="keyword">new</span> <span class="title class_">VueRouter</span>(&#123;</span></span><br><span class="line"><span class="language-javascript">        <span class="attr">routes</span>: [</span></span><br><span class="line"><span class="language-javascript">            &#123; <span class="attr">path</span>: <span class="string">&#x27;/login&#x27;</span>, <span class="attr">component</span>: login &#125;,</span></span><br><span class="line"><span class="language-javascript">            &#123; <span class="attr">path</span>: <span class="string">&#x27;/register&#x27;</span>, <span class="attr">component</span>: register &#125;</span></span><br><span class="line"><span class="language-javascript">        ]</span></span><br><span class="line"><span class="language-javascript">    &#125;)</span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// 创建 Vue 实例，得到 ViewModel</span></span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">var</span> vm = <span class="keyword">new</span> <span class="title class_">Vue</span>(&#123;</span></span><br><span class="line"><span class="language-javascript">        <span class="attr">el</span>: <span class="string">&#x27;#app&#x27;</span>,</span></span><br><span class="line"><span class="language-javascript">        <span class="attr">data</span>: &#123;&#125;,</span></span><br><span class="line"><span class="language-javascript">        <span class="attr">methods</span>: &#123;&#125;,</span></span><br><span class="line"><span class="language-javascript">        <span class="comment">// router: router</span></span></span><br><span class="line"><span class="language-javascript">        router</span></span><br><span class="line"><span class="language-javascript">    &#125;);</span></span><br><span class="line"><span class="language-javascript"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure></li>
</ol>
<h3 id="3-3-4-使用Restful格式传参"><a href="#3-3-4-使用Restful格式传参" class="headerlink" title="3.3.4 使用Restful格式传参"></a>3.3.4 使用Restful格式传参</h3><ol>
<li><p>html代码</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;app&quot;</span>&gt;</span></span><br><span class="line">    <span class="comment">&lt;!-- 如果在路由中，使用 查询字符串，给路由传递参数，则 不需要修改 路由规则的 path 属性 --&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">router-link</span> <span class="attr">to</span>=<span class="string">&quot;/login?id=10&amp;name=zs&quot;</span>&gt;</span>登录<span class="tag">&lt;/<span class="name">router-link</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">router-link</span> <span class="attr">to</span>=<span class="string">&quot;/register&quot;</span>&gt;</span>注册<span class="tag">&lt;/<span class="name">router-link</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">router-view</span>&gt;</span><span class="tag">&lt;/<span class="name">router-view</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure></li>
<li><p>JavaScript代码</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">var</span> login = &#123;</span></span><br><span class="line"><span class="language-javascript">        <span class="attr">template</span>: <span class="string">&#x27;&lt;h1&gt;登录 --- &#123;&#123; $route.params.id &#125;&#125; --- &#123;&#123; $route.params.name &#125;&#125;&lt;/h1&gt;&#x27;</span>,</span></span><br><span class="line"><span class="language-javascript">        <span class="title function_">data</span>(<span class="params"></span>)&#123;</span></span><br><span class="line"><span class="language-javascript">            <span class="keyword">return</span> &#123;</span></span><br><span class="line"><span class="language-javascript">                <span class="attr">msg</span>: <span class="string">&#x27;123&#x27;</span></span></span><br><span class="line"><span class="language-javascript">            &#125;</span></span><br><span class="line"><span class="language-javascript">        &#125;,</span></span><br><span class="line"><span class="language-javascript">        <span class="title function_">created</span>(<span class="params"></span>)&#123; <span class="comment">// 组件的生命周期钩子函数</span></span></span><br><span class="line"><span class="language-javascript">            <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="variable language_">this</span>.<span class="property">$route</span>.<span class="property">params</span>.<span class="property">id</span>)</span></span><br><span class="line"><span class="language-javascript">        &#125;</span></span><br><span class="line"><span class="language-javascript">    &#125;</span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">var</span> register = &#123;</span></span><br><span class="line"><span class="language-javascript">        <span class="attr">template</span>: <span class="string">&#x27;&lt;h1&gt;注册&lt;/h1&gt;&#x27;</span></span></span><br><span class="line"><span class="language-javascript">    &#125;</span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">var</span> router = <span class="keyword">new</span> <span class="title class_">VueRouter</span>(&#123;</span></span><br><span class="line"><span class="language-javascript">        <span class="attr">routes</span>: [</span></span><br><span class="line"><span class="language-javascript">            &#123; <span class="attr">path</span>: <span class="string">&#x27;/login/:id/:name&#x27;</span>, <span class="attr">component</span>: login &#125;,</span></span><br><span class="line"><span class="language-javascript">            &#123; <span class="attr">path</span>: <span class="string">&#x27;/register&#x27;</span>, <span class="attr">component</span>: register &#125;</span></span><br><span class="line"><span class="language-javascript">        ]</span></span><br><span class="line"><span class="language-javascript">    &#125;)</span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// 创建 Vue 实例，得到 ViewModel</span></span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">var</span> vm = <span class="keyword">new</span> <span class="title class_">Vue</span>(&#123;</span></span><br><span class="line"><span class="language-javascript">        <span class="attr">el</span>: <span class="string">&#x27;#app&#x27;</span>,</span></span><br><span class="line"><span class="language-javascript">        <span class="attr">data</span>: &#123;&#125;,</span></span><br><span class="line"><span class="language-javascript">        <span class="attr">methods</span>: &#123;&#125;,</span></span><br><span class="line"><span class="language-javascript">        <span class="comment">// router: router</span></span></span><br><span class="line"><span class="language-javascript">        router</span></span><br><span class="line"><span class="language-javascript">    &#125;);</span></span><br><span class="line"><span class="language-javascript"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure></li>
</ol>
<h2 id="3-4-路由嵌套"><a href="#3-4-路由嵌套" class="headerlink" title="3.4 路由嵌套"></a>3.4 路由嵌套</h2><ol>
<li><p>html代码</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;app&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">router-link</span> <span class="attr">to</span>=<span class="string">&quot;/account&quot;</span>&gt;</span>Account<span class="tag">&lt;/<span class="name">router-link</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">router-view</span>&gt;</span><span class="tag">&lt;/<span class="name">router-view</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure></li>
<li><p>定义父组件模板</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">template</span> <span class="attr">id</span>=<span class="string">&quot;tmpl&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">h1</span>&gt;</span>这是 Account 组件<span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">router-link</span> <span class="attr">to</span>=<span class="string">&quot;/account/login&quot;</span>&gt;</span>登录<span class="tag">&lt;/<span class="name">router-link</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">router-link</span> <span class="attr">to</span>=<span class="string">&quot;/account/register&quot;</span>&gt;</span>注册<span class="tag">&lt;/<span class="name">router-link</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">router-view</span>&gt;</span><span class="tag">&lt;/<span class="name">router-view</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">template</span>&gt;</span></span><br></pre></td></tr></table></figure></li>
<li><p>JavaScript代码</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// 组件的模板对象</span></span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">var</span> account = &#123;</span></span><br><span class="line"><span class="language-javascript">        <span class="attr">template</span>: <span class="string">&#x27;#tmpl&#x27;</span></span></span><br><span class="line"><span class="language-javascript">    &#125;</span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">var</span> login = &#123;</span></span><br><span class="line"><span class="language-javascript">        <span class="attr">template</span>: <span class="string">&#x27;&lt;h3&gt;登录&lt;/h3&gt;&#x27;</span></span></span><br><span class="line"><span class="language-javascript">    &#125;</span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">var</span> register = &#123;</span></span><br><span class="line"><span class="language-javascript">        <span class="attr">template</span>: <span class="string">&#x27;&lt;h3&gt;注册&lt;/h3&gt;&#x27;</span></span></span><br><span class="line"><span class="language-javascript">    &#125;</span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">var</span> router = <span class="keyword">new</span> <span class="title class_">VueRouter</span>(&#123;</span></span><br><span class="line"><span class="language-javascript">        <span class="attr">routes</span>: [</span></span><br><span class="line"><span class="language-javascript">            &#123;</span></span><br><span class="line"><span class="language-javascript">                <span class="attr">path</span>: <span class="string">&#x27;/account&#x27;</span>,</span></span><br><span class="line"><span class="language-javascript">                <span class="attr">component</span>: account,</span></span><br><span class="line"><span class="language-javascript">                <span class="comment">// 使用 children 属性，实现子路由，同时，子路由的 path 前面，不要带 / ，否则永远以根路径开始请求，这样不方便我们用户去理解URL地址</span></span></span><br><span class="line"><span class="language-javascript">                <span class="attr">children</span>: [</span></span><br><span class="line"><span class="language-javascript">                    &#123; <span class="attr">path</span>: <span class="string">&#x27;login&#x27;</span>, <span class="attr">component</span>: login &#125;,</span></span><br><span class="line"><span class="language-javascript">                    &#123; <span class="attr">path</span>: <span class="string">&#x27;register&#x27;</span>, <span class="attr">component</span>: register &#125;</span></span><br><span class="line"><span class="language-javascript">                ]</span></span><br><span class="line"><span class="language-javascript">            &#125;</span></span><br><span class="line"><span class="language-javascript">            <span class="comment">// &#123; path: &#x27;/account/login&#x27;, component: login &#125;,</span></span></span><br><span class="line"><span class="language-javascript">            <span class="comment">// &#123; path: &#x27;/account/register&#x27;, component: register &#125;</span></span></span><br><span class="line"><span class="language-javascript">        ]</span></span><br><span class="line"><span class="language-javascript">    &#125;)</span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// 创建 Vue 实例，得到 ViewModel</span></span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">var</span> vm = <span class="keyword">new</span> <span class="title class_">Vue</span>(&#123;</span></span><br><span class="line"><span class="language-javascript">        <span class="attr">el</span>: <span class="string">&#x27;#app&#x27;</span>,</span></span><br><span class="line"><span class="language-javascript">        <span class="attr">data</span>: &#123;&#125;,</span></span><br><span class="line"><span class="language-javascript">        <span class="attr">methods</span>: &#123;&#125;,</span></span><br><span class="line"><span class="language-javascript">        router</span></span><br><span class="line"><span class="language-javascript">    &#125;);</span></span><br><span class="line"><span class="language-javascript"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure></li>
</ol>
<h2 id="3-5-命名视图"><a href="#3-5-命名视图" class="headerlink" title="3.5 命名视图"></a>3.5 命名视图</h2><p><strong>需求：命名视图实现经典布局</strong></p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span> <span class="attr">lang</span>=<span class="string">&quot;en&quot;</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">&quot;UTF-8&quot;</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">name</span>=<span class="string">&quot;viewport&quot;</span> <span class="attr">content</span>=<span class="string">&quot;width=device-width, initial-scale=1.0&quot;</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">http-equiv</span>=<span class="string">&quot;X-UA-Compatible&quot;</span> <span class="attr">content</span>=<span class="string">&quot;ie=edge&quot;</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">title</span>&gt;</span>Document<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">&quot;https://cdn.jsdelivr.net/npm/vue&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">&quot;https://cdn.bootcss.com/vue-router/3.1.3/vue-router.js&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">style</span>&gt;</span><span class="language-css"></span></span><br><span class="line"><span class="language-css">    <span class="selector-tag">html</span>,</span></span><br><span class="line"><span class="language-css">    <span class="selector-tag">body</span> &#123;</span></span><br><span class="line"><span class="language-css">      <span class="attribute">margin</span>: <span class="number">0</span>;</span></span><br><span class="line"><span class="language-css">      <span class="attribute">padding</span>: <span class="number">0</span>;</span></span><br><span class="line"><span class="language-css">    &#125;</span></span><br><span class="line"><span class="language-css"></span></span><br><span class="line"><span class="language-css">    <span class="selector-class">.header</span> &#123;</span></span><br><span class="line"><span class="language-css">      <span class="attribute">background-color</span>: orange;</span></span><br><span class="line"><span class="language-css">      <span class="attribute">height</span>: <span class="number">80px</span>;</span></span><br><span class="line"><span class="language-css">    &#125;</span></span><br><span class="line"><span class="language-css"></span></span><br><span class="line"><span class="language-css">    <span class="selector-tag">h1</span> &#123;</span></span><br><span class="line"><span class="language-css">      <span class="attribute">margin</span>: <span class="number">0</span>;</span></span><br><span class="line"><span class="language-css">      <span class="attribute">padding</span>: <span class="number">0</span>;</span></span><br><span class="line"><span class="language-css">      <span class="attribute">font-size</span>: <span class="number">16px</span>;</span></span><br><span class="line"><span class="language-css">    &#125;</span></span><br><span class="line"><span class="language-css"></span></span><br><span class="line"><span class="language-css">    <span class="selector-class">.container</span> &#123;</span></span><br><span class="line"><span class="language-css">      <span class="attribute">display</span>: flex;</span></span><br><span class="line"><span class="language-css">      <span class="attribute">height</span>: <span class="number">600px</span>;</span></span><br><span class="line"><span class="language-css">    &#125;</span></span><br><span class="line"><span class="language-css"></span></span><br><span class="line"><span class="language-css">    <span class="selector-class">.left</span> &#123;</span></span><br><span class="line"><span class="language-css">      <span class="attribute">background-color</span>: lightgreen;</span></span><br><span class="line"><span class="language-css">      <span class="attribute">flex</span>: <span class="number">2</span>;</span></span><br><span class="line"><span class="language-css">    &#125;</span></span><br><span class="line"><span class="language-css"></span></span><br><span class="line"><span class="language-css">    <span class="selector-class">.main</span> &#123;</span></span><br><span class="line"><span class="language-css">      <span class="attribute">background-color</span>: lightpink;</span></span><br><span class="line"><span class="language-css">      <span class="attribute">flex</span>: <span class="number">8</span>;</span></span><br><span class="line"><span class="language-css">    &#125;</span></span><br><span class="line"><span class="language-css">  </span><span class="tag">&lt;/<span class="name">style</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;app&quot;</span>&gt;</span></span><br><span class="line"></span><br><span class="line">    <span class="tag">&lt;<span class="name">router-view</span>&gt;</span><span class="tag">&lt;/<span class="name">router-view</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;container&quot;</span>&gt;</span></span><br><span class="line">      <span class="comment">&lt;!-- 指定name传递 --&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">router-view</span> <span class="attr">name</span>=<span class="string">&quot;left&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">router-view</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">router-view</span> <span class="attr">name</span>=<span class="string">&quot;main&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">router-view</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"></span><br><span class="line">  <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"></span><br><span class="line">  <span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">var</span> header = &#123;</span></span><br><span class="line"><span class="language-javascript">      <span class="attr">template</span>: <span class="string">&#x27;&lt;h1 class=&quot;header&quot;&gt;Header头部区域&lt;/h1&gt;&#x27;</span></span></span><br><span class="line"><span class="language-javascript">    &#125;</span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">var</span> leftBox = &#123;</span></span><br><span class="line"><span class="language-javascript">      <span class="attr">template</span>: <span class="string">&#x27;&lt;h1 class=&quot;left&quot;&gt;Left侧边栏区域&lt;/h1&gt;&#x27;</span></span></span><br><span class="line"><span class="language-javascript">    &#125;</span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">var</span> mainBox = &#123;</span></span><br><span class="line"><span class="language-javascript">      <span class="attr">template</span>: <span class="string">&#x27;&lt;h1 class=&quot;main&quot;&gt;mainBox主体区域&lt;/h1&gt;&#x27;</span></span></span><br><span class="line"><span class="language-javascript">    &#125;</span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// 创建路由对象</span></span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">var</span> router = <span class="keyword">new</span> <span class="title class_">VueRouter</span>(&#123;</span></span><br><span class="line"><span class="language-javascript">      <span class="attr">routes</span>: [</span></span><br><span class="line"><span class="language-javascript">       <span class="comment">// 这个操作是不行的，三选一操作</span></span></span><br><span class="line"><span class="language-javascript">        <span class="comment">/* &#123; path: &#x27;/&#x27;, component: header &#125;,</span></span></span><br><span class="line"><span class="comment"><span class="language-javascript">        &#123; path: &#x27;/left&#x27;, component: leftBox &#125;,</span></span></span><br><span class="line"><span class="comment"><span class="language-javascript">        &#123; path: &#x27;/main&#x27;, component: mainBox &#125; */</span></span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">        &#123;</span></span><br><span class="line"><span class="language-javascript">          <span class="attr">path</span>: <span class="string">&#x27;/&#x27;</span>, <span class="attr">components</span>: &#123;</span></span><br><span class="line"><span class="language-javascript">            <span class="string">&#x27;default&#x27;</span>: header,</span></span><br><span class="line"><span class="language-javascript">            <span class="string">&#x27;left&#x27;</span>: leftBox,</span></span><br><span class="line"><span class="language-javascript">            <span class="string">&#x27;main&#x27;</span>: mainBox</span></span><br><span class="line"><span class="language-javascript">          &#125;</span></span><br><span class="line"><span class="language-javascript">        &#125;</span></span><br><span class="line"><span class="language-javascript">      ]</span></span><br><span class="line"><span class="language-javascript">    &#125;)</span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// 创建 Vue 实例，得到 ViewModel</span></span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">var</span> vm = <span class="keyword">new</span> <span class="title class_">Vue</span>(&#123;</span></span><br><span class="line"><span class="language-javascript">      <span class="attr">el</span>: <span class="string">&#x27;#app&#x27;</span>,</span></span><br><span class="line"><span class="language-javascript">      <span class="attr">data</span>: &#123;&#125;,</span></span><br><span class="line"><span class="language-javascript">      <span class="attr">methods</span>: &#123;&#125;,</span></span><br><span class="line"><span class="language-javascript">      router</span></span><br><span class="line"><span class="language-javascript">    &#125;);</span></span><br><span class="line"><span class="language-javascript">  </span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h1 id="4-Vuex"><a href="#4-Vuex" class="headerlink" title="4. Vuex"></a>4. Vuex</h1><h2 id="4-1-Vuex是个什么鬼"><a href="#4-1-Vuex是个什么鬼" class="headerlink" title="4.1 Vuex是个什么鬼"></a>4.1 Vuex是个什么鬼</h2><blockquote>
<p>Vuex 是一个专为 Vue.js 应用程序开发的<strong>状态管理模式</strong>。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 <a target="_blank" rel="noopener" href="https://github.com/vuejs/vue-devtools">devtools extension</a>，提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。</p>
</blockquote>
<p>上述摘抄来源于官方对Vuex的解释。眨眼一看，什么鬼？</p>
<p>后端的童鞋们，不要看了，前端技术太装逼了，看不下去。我来解释一下。</p>
<p>状态管理模式可以理解为对共用数据以及组件的管理，类似与我们Java Servlet的四大域对象，将数据放入域中管理，相同域的数据可以做到数据操控，前端不同的页面及组件修改了数据后都互相可见，并且是响应式的(数据与视图之间实时同步)。</p>
<p>总而言之，Vuex是实现组件全局状态（数据）管理的一种机制，可以方便的实现组件之间的数据共享。</p>
<p>使用Vuex管理数据的好处：</p>
<ol>
<li>能够在vuex中集中管理共享的数据，便于开发和后期进行维护；</li>
<li>能够高效的实现组件之间的数据共享，提高开发效率；</li>
<li>存储在vuex中的数据是响应式的，当数据发生改变时，页面中的数据也会同步更新；</li>
</ol>
<h2 id="4-2-“状态管理”又是个什么鬼"><a href="#4-2-“状态管理”又是个什么鬼" class="headerlink" title="4.2 “状态管理”又是个什么鬼"></a>4.2 “状态管理”又是个什么鬼</h2><p>我们先来一个官方简单的Vue计数应用示例，见识一下这个Vuex。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">new</span> <span class="title class_">Vue</span>(&#123;</span><br><span class="line">  <span class="comment">// state</span></span><br><span class="line">  data () &#123;</span><br><span class="line">    <span class="keyword">return</span> &#123;</span><br><span class="line">      <span class="attr">count</span>: <span class="number">0</span></span><br><span class="line">    &#125;</span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="comment">// view</span></span><br><span class="line">  <span class="attr">template</span>: <span class="string">`</span></span><br><span class="line"><span class="string">    &lt;div&gt;&#123;&#123; count &#125;&#125;&lt;/div&gt;</span></span><br><span class="line"><span class="string">  `</span>,</span><br><span class="line">  <span class="comment">// actions</span></span><br><span class="line">  <span class="attr">methods</span>: &#123;</span><br><span class="line">    increment () &#123;</span><br><span class="line">      <span class="variable language_">this</span>.<span class="property">count</span>++</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>

<p>这个状态自管理应用包含以下几个部分：</p>
<ul>
<li><strong>state</strong>，驱动应用的数据源；</li>
<li><strong>view</strong>，以声明方式将 <strong>state</strong> 映射到视图；</li>
<li><strong>actions</strong>，响应在 <strong>view</strong> 上的用户输入导致的状态变化。</li>
</ul>
<p>以下是一个表示“单向数据流”理念的简单示意：</p>
<p><img src="https://ltyeamin.github.io/imgs/2020/07/20200731163332.png" alt="单向数据流"></p>
<p>但是，当我们的应用遇到<strong>多个组件共享状态</strong>时，单向数据流的简洁性很容易被破坏：</p>
<ul>
<li>多个视图依赖于同一状态。</li>
<li>来自不同视图的行为需要变更同一状态。</li>
</ul>
<p>对于问题一，传参的方法对于多层嵌套的组件将会非常繁琐，并且对于兄弟组件间的状态传递无能为力。对于问题二，我们经常会采用父子组件直接引用或者通过事件来变更和同步状态的多份拷贝。以上的这些模式非常脆弱，通常会导致无法维护的代码。</p>
<p>因此，我们为什么不把组件的共享状态抽取出来，以一个全局单例模式管理呢？在这种模式下，我们的组件树构成了一个巨大的“视图”，不管在树的哪个位置，任何组件都能获取状态或者触发行为！</p>
<p>通过定义和隔离状态管理中的各种概念并通过强制规则维持视图和状态间的独立性，我们的代码将会变得更结构化且易维护。</p>
<p>这就是 Vuex 背后的基本思想，借鉴了 <a target="_blank" rel="noopener" href="https://facebook.github.io/flux/docs/overview">Flux</a>、<a target="_blank" rel="noopener" href="http://redux.js.org/">Redux</a> 和 <a target="_blank" rel="noopener" href="https://guide.elm-lang.org/architecture/">The Elm Architecture</a>。与其他模式不同的是，Vuex 是专门为 Vue.js 设计的状态管理库，以利用 Vue.js 的细粒度数据响应机制来进行高效的状态更新。</p>
<p>如果你想交互式地学习 Vuex，可以看这个 <a target="_blank" rel="noopener" href="https://scrimba.com/g/gvuex">Scrimba 上的 Vuex 课程</a>，它将录屏和代码试验场混合在了一起，你可以随时暂停并尝试。</p>
<p><img src="https://ltyeamin.github.io/imgs/2020/07/20200731163338.png" alt="交互图"></p>
<h2 id="4-3-什么时候用Vuex"><a href="#4-3-什么时候用Vuex" class="headerlink" title="4.3 什么时候用Vuex"></a>4.3 什么时候用Vuex</h2><p>Vuex 可以帮助我们管理共享状态，并附带了更多的概念和框架。这需要对短期和长期效益进行权衡。</p>
<p>如果您不打算开发大型单页应用，使用 Vuex 可能是繁琐冗余的。确实是如此——如果您的应用够简单，您最好不要使用 Vuex。一个简单的 <a target="_blank" rel="noopener" href="https://cn.vuejs.org/v2/guide/state-management.html#%E7%AE%80%E5%8D%95%E7%8A%B6%E6%80%81%E7%AE%A1%E7%90%86%E8%B5%B7%E6%AD%A5%E4%BD%BF%E7%94%A8">store 模式</a>就足够您所需了。但是，如果您需要构建一个中大型单页应用，您很可能会考虑如何更好地在组件外部管理状态，Vuex 将会成为自然而然的选择。引用 Redux 的作者 Dan Abramov 的话说就是：</p>
<blockquote>
<p>Flux 架构就像眼镜：您自会知道什么时候需要它。</p>
</blockquote>
<h2 id="4-4-开始使用Vuex"><a href="#4-4-开始使用Vuex" class="headerlink" title="4.4 开始使用Vuex"></a>4.4 开始使用Vuex</h2><p>每一个 Vuex 应用的核心就是 store（仓库）。“store”基本上就是一个容器，它包含着你的应用中大部分的**状态 (state)**。Vuex 和单纯的全局对象有以下两点不同：</p>
<ol>
<li>Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。</li>
<li>你不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地<strong>提交 (commit) mutation</strong>。这样使得我们可以方便地跟踪每一个状态的变化，从而让我们能够实现一些工具帮助我们更好地了解我们的应用。</li>
</ol>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 如果在模块化构建系统中，请确保在开头调用了 Vue.use(Vuex)</span></span><br><span class="line"><span class="keyword">const</span> store = <span class="keyword">new</span> <span class="title class_">Vuex</span>.<span class="title class_">Store</span>(&#123;</span><br><span class="line">    <span class="comment">// 状态(数据)</span></span><br><span class="line">    <span class="attr">state</span>: &#123;</span><br><span class="line">        <span class="attr">count</span>: <span class="number">0</span></span><br><span class="line">    &#125;,</span><br><span class="line">    <span class="comment">// 状态变更操作</span></span><br><span class="line">    <span class="attr">mutations</span>: &#123;</span><br><span class="line">        increment (state) &#123;</span><br><span class="line">            state.<span class="property">count</span>++</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;)</span><br><span class="line"><span class="comment">// store.commit 方法触发状态变更</span></span><br><span class="line">store.<span class="title function_">commit</span>(<span class="string">&#x27;increment&#x27;</span>)</span><br><span class="line"><span class="comment">// 可以通过 store.state 来获取状态对象</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(store.<span class="property">state</span>.<span class="property">count</span>) <span class="comment">// -&gt; 1</span></span><br></pre></td></tr></table></figure>

<p>我们通过提交 mutation 的方式，而非直接改变 <code>store.state.count</code>，是因为我们想要更明确地追踪到状态的变化。这个简单的约定能够让你的意图更加明显，这样你在阅读代码的时候能更容易地解读应用内部的状态改变。此外，这样也让我们有机会去实现一些能记录每次状态改变，保存状态快照的调试工具。有了它，我们甚至可以实现如时间穿梭般的调试体验。</p>
<p>由于 store 中的状态是响应式的，在组件中调用 store 中的状态简单到仅需要在计算属性中返回即可。触发变化也仅仅是在组件的 methods 中提交 mutation。</p>
<p>总而言之，只有组件共享数据的时候，才可以放入到vuex中，如果是组件内部的私有数据，只要放在组件的data中即可，不需要放入vuex进行数据管理。</p>
<h2 id="4-5-用Vuex实现购物车的数据操作"><a href="#4-5-用Vuex实现购物车的数据操作" class="headerlink" title="4.5 用Vuex实现购物车的数据操作"></a>4.5 用Vuex实现购物车的数据操作</h2><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br><span class="line">113</span><br><span class="line">114</span><br><span class="line">115</span><br><span class="line">116</span><br><span class="line">117</span><br><span class="line">118</span><br><span class="line">119</span><br><span class="line">120</span><br><span class="line">121</span><br><span class="line">122</span><br><span class="line">123</span><br><span class="line">124</span><br><span class="line">125</span><br><span class="line">126</span><br><span class="line">127</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span> <span class="attr">lang</span>=<span class="string">&quot;en&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">&quot;UTF-8&quot;</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">meta</span> <span class="attr">name</span>=<span class="string">&quot;viewport&quot;</span> <span class="attr">content</span>=<span class="string">&quot;width=device-width, initial-scale=1.0&quot;</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">meta</span> <span class="attr">http-equiv</span>=<span class="string">&quot;X-UA-Compatible&quot;</span> <span class="attr">content</span>=<span class="string">&quot;ie=edge&quot;</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">title</span>&gt;</span>Vuex<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">&quot;https://cdn.jsdelivr.net/npm/vue/dist/vue.js&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">&quot;https://cdn.bootcss.com/vuex/3.0.1/vuex.min.js&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"></span><br><span class="line">    <span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;app&quot;</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">cart</span>&gt;</span><span class="tag">&lt;/<span class="name">cart</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">count</span>&gt;</span><span class="tag">&lt;/<span class="name">count</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">price</span>&gt;</span><span class="tag">&lt;/<span class="name">price</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"></span><br><span class="line">        <span class="tag">&lt;<span class="name">template</span> <span class="attr">id</span>=<span class="string">&quot;cart&quot;</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">div</span>&gt;</span>  </span><br><span class="line">                <span class="tag">&lt;<span class="name">h1</span>&gt;</span>购物车页面<span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;/<span class="name">template</span>&gt;</span></span><br><span class="line"></span><br><span class="line">        <span class="tag">&lt;<span class="name">template</span> <span class="attr">id</span>=<span class="string">&quot;count&quot;</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">div</span>&gt;</span></span><br><span class="line">                <span class="comment">&lt;!-- &lt;p&gt;索尼A7M3全画幅微单相机     ￥&#123;&#123;$store.state.unitPrice&#125;&#125;&lt;/p&gt; --&gt;</span></span><br><span class="line">                <span class="comment">&lt;!-- 通过Vuex的Getter取值 --&gt;</span></span><br><span class="line">                <span class="tag">&lt;<span class="name">p</span> <span class="attr">v-html</span>=<span class="string">&quot;$store.getters.text&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">                <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;input&quot;</span> <span class="attr">name</span>=<span class="string">&quot;num&quot;</span> <span class="attr">v-model</span>=<span class="string">&quot;$store.state.num&quot;</span> &gt;</span></span><br><span class="line">                <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;button&quot;</span> <span class="attr">value</span>=<span class="string">&quot;再买一个&quot;</span> @<span class="attr">click</span>=<span class="string">&quot;add&quot;</span>&gt;</span></span><br><span class="line">                <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;button&quot;</span> <span class="attr">value</span>=<span class="string">&quot;少买一个&quot;</span> @<span class="attr">click</span>=<span class="string">&quot;remove&quot;</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;/<span class="name">template</span>&gt;</span></span><br><span class="line"></span><br><span class="line">        <span class="tag">&lt;<span class="name">template</span> <span class="attr">id</span>=<span class="string">&quot;price&quot;</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">h2</span>&gt;</span>当前总金额为 &#123;&#123;$store.state.num&#125;&#125; * &#123;&#123;$store.state.unitPrice&#125;&#125; =  &#123;&#123;$store.state.num * $store.state.unitPrice&#125;&#125;<span class="tag">&lt;/<span class="name">h2</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;/<span class="name">template</span>&gt;</span></span><br><span class="line"></span><br><span class="line"></span><br><span class="line">        <span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">            <span class="comment">// 注册vuex到vue中</span></span></span><br><span class="line"><span class="language-javascript">            <span class="comment">// Vue.use(Vuex)</span></span></span><br><span class="line"><span class="language-javascript">            <span class="comment">// new Vuex.Store() 实例，得到一个 数据仓储对象</span></span></span><br><span class="line"><span class="language-javascript">            <span class="keyword">const</span> store = <span class="keyword">new</span> <span class="title class_">Vuex</span>.<span class="title class_">Store</span>(&#123;</span></span><br><span class="line"><span class="language-javascript">                <span class="comment">// 大家可以把 state 想象成 组件中的 data ,专门用来存储数据的</span></span></span><br><span class="line"><span class="language-javascript">                <span class="comment">// 如果在 组件中，想要访问，store 中的数据，只能通过 this.$store.state.*** 来访问</span></span></span><br><span class="line"><span class="language-javascript">                <span class="attr">state</span>: &#123;</span></span><br><span class="line"><span class="language-javascript">                    <span class="attr">num</span>: <span class="number">2</span>,</span></span><br><span class="line"><span class="language-javascript">                    <span class="attr">unitPrice</span>: <span class="number">13990</span></span></span><br><span class="line"><span class="language-javascript">                &#125;,</span></span><br><span class="line"><span class="language-javascript">                <span class="comment">// 注意： 如果要操作 store 中的 state 值，只能通过 调用 mutations 提供的方法，才能操作对应的数据，不推荐直接操作 state 中的数据，因为 万一导致了数据的紊乱，不能快速定位到错误的原因，因为，每个组件都可能有操作数据的方法；</span></span></span><br><span class="line"><span class="language-javascript">                <span class="attr">mutations</span>: &#123;</span></span><br><span class="line"><span class="language-javascript">                    <span class="comment">// 注意： 如果组件想要调用 mutations 中的方法，只能使用 this.$store.commit(&#x27;方法名&#x27;)</span></span></span><br><span class="line"><span class="language-javascript">                    <span class="comment">// 这种 调用 mutations 方法的格式，和 this.$emit(&#x27;父组件中方法名&#x27;)类似</span></span></span><br><span class="line"><span class="language-javascript">                    <span class="comment">// 注意： mutations 的 函数参数列表中，最多支持两个参数，其中，参数1： 是 state 状态； 参数2： 通过 commit 提交过来的参数；如果有多个参数，可将参数作为对象放入第2个参数即可</span></span></span><br><span class="line"><span class="language-javascript">                    <span class="attr">increase</span>: <span class="function">(<span class="params">state</span>)=&gt;</span> &#123;</span></span><br><span class="line"><span class="language-javascript">                        <span class="comment">// 注意：箭头函数this在这里的作用域变了，如果不用箭头函数，那么默认的this就是vm实例</span></span></span><br><span class="line"><span class="language-javascript">                        state.<span class="property">num</span>++;</span></span><br><span class="line"><span class="language-javascript">                    &#125;,</span></span><br><span class="line"><span class="language-javascript">                    <span class="attr">decrease</span>: <span class="function">(<span class="params">state</span>)=&gt;</span> &#123;</span></span><br><span class="line"><span class="language-javascript">                        <span class="keyword">if</span> (state.<span class="property">num</span> &lt;= <span class="number">1</span>) &#123;</span></span><br><span class="line"><span class="language-javascript">                            <span class="keyword">return</span></span></span><br><span class="line"><span class="language-javascript">                        &#125;</span></span><br><span class="line"><span class="language-javascript">                        state.<span class="property">num</span>--;</span></span><br><span class="line"><span class="language-javascript">                    &#125;</span></span><br><span class="line"><span class="language-javascript">                &#125;,</span></span><br><span class="line"><span class="language-javascript">                <span class="attr">getters</span>: &#123;</span></span><br><span class="line"><span class="language-javascript">                    <span class="comment">// 注意：这里的 getters， 只负责 对外提供数据，不负责 修改数据，如果想要修改 state 中的数据，请 去找 mutations</span></span></span><br><span class="line"><span class="language-javascript">                    <span class="attr">text</span>: <span class="keyword">function</span> (<span class="params">state</span>) &#123;</span></span><br><span class="line"><span class="language-javascript">                        <span class="keyword">return</span> <span class="string">&#x27;索尼A7M3全画幅微单相机     ￥&#x27;</span> + state.<span class="property">unitPrice</span></span></span><br><span class="line"><span class="language-javascript">                    &#125;</span></span><br><span class="line"><span class="language-javascript">                    <span class="comment">// 经过咱们回顾对比，发现 getters 中的方法， 和组件中的过滤器比较类似，因为 过滤器和 getters 都没有修改原数据， 都是把原数据做了一层包装，提供给了 调用者；</span></span></span><br><span class="line"><span class="language-javascript">                    <span class="comment">// 其次， getters 也和 computed 比较像， 只要 state 中的数据发生变化了，那么，如果 getters 正好也引用了这个数据，那么 就会立即触发 getters 的重新求值；</span></span></span><br><span class="line"><span class="language-javascript">                &#125;</span></span><br><span class="line"><span class="language-javascript">            &#125;)</span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">            <span class="keyword">var</span> vm =  <span class="keyword">new</span> <span class="title class_">Vue</span>(&#123;</span></span><br><span class="line"><span class="language-javascript">                <span class="attr">el</span>: <span class="string">&#x27;#app&#x27;</span>,</span></span><br><span class="line"><span class="language-javascript">                <span class="attr">data</span>: &#123;</span></span><br><span class="line"><span class="language-javascript">                    <span class="comment">// 我们可能在这里定义数据，如果组件多的情况下，尤其是组件多层嵌套的情况下，若最底层的数据发生变化，还得一层一层emit上去，很麻烦</span></span></span><br><span class="line"><span class="language-javascript">                    <span class="comment">// 如果用Vuex，只需要在最底层this.$store.commit()，然后再最外层组件用computer属性获取对应的值就可以做到实时更新</span></span></span><br><span class="line"><span class="language-javascript">                &#125;,</span></span><br><span class="line"><span class="language-javascript">                <span class="attr">methods</span>: &#123;</span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">                &#125;,</span></span><br><span class="line"><span class="language-javascript">                <span class="attr">components</span>: &#123;</span></span><br><span class="line"><span class="language-javascript">                    <span class="attr">cart</span>: &#123;</span></span><br><span class="line"><span class="language-javascript">                        <span class="attr">template</span>: <span class="string">&quot;#cart&quot;</span> </span></span><br><span class="line"><span class="language-javascript">                    &#125;,</span></span><br><span class="line"><span class="language-javascript">                    <span class="attr">count</span>: &#123;</span></span><br><span class="line"><span class="language-javascript">                        <span class="attr">template</span>: <span class="string">&quot;#count&quot;</span>,</span></span><br><span class="line"><span class="language-javascript">                        <span class="attr">data</span>: <span class="keyword">function</span>(<span class="params"></span>) &#123;</span></span><br><span class="line"><span class="language-javascript">                            <span class="keyword">return</span> &#123;</span></span><br><span class="line"><span class="language-javascript">                                <span class="comment">// 可以定义自己组件内部，那么问题来了，其他组件想用怎么办？传值太麻烦了</span></span></span><br><span class="line"><span class="language-javascript">                                <span class="comment">// num : 1</span></span></span><br><span class="line"><span class="language-javascript">                            &#125;</span></span><br><span class="line"><span class="language-javascript">                        &#125;,</span></span><br><span class="line"><span class="language-javascript">                        <span class="attr">methods</span>: &#123;</span></span><br><span class="line"><span class="language-javascript">                            <span class="title function_">add</span>(<span class="params"></span>) &#123;</span></span><br><span class="line"><span class="language-javascript">                                <span class="comment">// 千万不要这么用，不符合 vuex 的设计理念</span></span></span><br><span class="line"><span class="language-javascript">                                <span class="comment">// this.$store.state.num++;</span></span></span><br><span class="line"><span class="language-javascript">                                <span class="variable language_">this</span>.<span class="property">$store</span>.<span class="title function_">commit</span>(<span class="string">&quot;increase&quot;</span>);</span></span><br><span class="line"><span class="language-javascript">                            &#125;,</span></span><br><span class="line"><span class="language-javascript">                            remove ()  &#123;</span></span><br><span class="line"><span class="language-javascript">                                <span class="variable language_">this</span>.<span class="property">$store</span>.<span class="title function_">commit</span>(<span class="string">&quot;decrease&quot;</span>);</span></span><br><span class="line"><span class="language-javascript">                            &#125;</span></span><br><span class="line"><span class="language-javascript">                        &#125;,</span></span><br><span class="line"><span class="language-javascript">                    &#125;,</span></span><br><span class="line"><span class="language-javascript">                    <span class="attr">price</span>: &#123;</span></span><br><span class="line"><span class="language-javascript">                        <span class="attr">template</span>: <span class="string">&quot;#price&quot;</span> </span></span><br><span class="line"><span class="language-javascript">                    &#125;</span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">                &#125;,</span></span><br><span class="line"><span class="language-javascript">                <span class="comment">// 将 vuex 创建的 store 挂载到 VM 实例上， 只要挂载到了 vm 上，任何组件都能使用 store 来存取数据</span></span></span><br><span class="line"><span class="language-javascript">                store</span></span><br><span class="line"><span class="language-javascript">            &#125;)</span></span><br><span class="line"><span class="language-javascript">            <span class="comment">// 总结：</span></span></span><br><span class="line"><span class="language-javascript">            <span class="comment">// 1. state中的数据，不能直接修改，如果想要修改，必须通过 mutations</span></span></span><br><span class="line"><span class="language-javascript">            <span class="comment">// 2. 如果组件想要直接 从 state 上获取数据： 需要 this.$store.state.***</span></span></span><br><span class="line"><span class="language-javascript">            <span class="comment">// 3. 如果 组件，想要修改数据，必须使用 mutations 提供的方法，需要通过 this.$store.commit(&#x27;方法的名称&#x27;， 唯一的一个参数)</span></span></span><br><span class="line"><span class="language-javascript">            <span class="comment">// 4. 如果 store 中 state 上的数据， 在对外提供的时候，需要做一层包装，那么 ，推荐使用 getters, 如果需要使用 getters ,则用 this.$store.getters.***</span></span></span><br><span class="line"><span class="language-javascript">        </span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"></span><br><span class="line">    <span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h1 id="5-自定义指令"><a href="#5-自定义指令" class="headerlink" title="5. 自定义指令"></a>5. 自定义指令</h1><h2 id="5-1-自定义全局指令"><a href="#5-1-自定义全局指令" class="headerlink" title="5.1 自定义全局指令"></a>5.1 自定义全局指令</h2><ol>
<li><p>指令定义</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 使用  Vue.directive() 定义全局的指令  v-focus</span></span><br><span class="line"><span class="comment">// 其中：参数1 ： 指令的名称，注意，在定义的时候，指令的名称前面，不需要加 v- 前缀, </span></span><br><span class="line"><span class="comment">// 但是： 在调用的时候，必须 在指令名称前 加上 v- 前缀来进行调用</span></span><br><span class="line"><span class="comment">//  参数2： 是一个对象，这个对象身上，有一些指令相关的函数，这些函数可以在特定的阶段，执行相关的操作</span></span><br><span class="line"><span class="title class_">Vue</span>.<span class="title function_">directive</span>(<span class="string">&#x27;focus&#x27;</span>, &#123;</span><br><span class="line">    <span class="attr">bind</span>: <span class="keyword">function</span> (<span class="params">el</span>) &#123; <span class="comment">// 每当指令绑定到元素上的时候，会立即执行这个 bind 函数，只执行一次</span></span><br><span class="line">        <span class="comment">// 注意： 在每个 函数中，第一个参数，永远是 el ，表示 被绑定了指令的那个元素，这个 el 参数，是一个原生的JS对象</span></span><br><span class="line">        <span class="comment">// 在元素 刚绑定了指令的时候，还没有 插入到 DOM中去，这时候，调用 focus 方法没有作用</span></span><br><span class="line">        <span class="comment">//  因为，一个元素，只有插入DOM之后，才能获取焦点</span></span><br><span class="line">        <span class="comment">// el.focus()</span></span><br><span class="line">    &#125;,</span><br><span class="line">    <span class="attr">inserted</span>: <span class="keyword">function</span> (<span class="params">el</span>) &#123;  <span class="comment">// inserted 表示元素 插入到DOM中的时候，会执行 inserted 函数【触发1次】</span></span><br><span class="line">        el.<span class="title function_">focus</span>()</span><br><span class="line">        <span class="comment">// 和JS行为有关的操作，最好在 inserted 中去执行，放置 JS行为不生效</span></span><br><span class="line">    &#125;,</span><br><span class="line">    <span class="attr">updated</span>: <span class="keyword">function</span> (<span class="params">el</span>) &#123;  <span class="comment">// 当VNode更新的时候，会执行 updated， 可能会触发多次</span></span><br><span class="line"></span><br><span class="line">    &#125;</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>

<p>// 自定义一个 设置字体颜色的 指令<br>Vue.directive(‘color’, {</p>
<pre><code>// 样式，只要通过指令绑定给了元素，不管这个元素有没有被插入到页面中去，这个元素肯定有了一个内联的样式
// 将来元素肯定会显示到页面中，这时候，浏览器的渲染引擎必然会解析样式，应用给这个元素
bind: function (el, binding) &#123;
    // el.style.color = &#39;red&#39;
    // console.log(binding.name)
    // 和样式相关的操作，一般都可以在 bind 执行

    // console.log(binding.value)
    // console.log(binding.expression)

    el.style.color = binding.value
&#125;
</code></pre>
<p>})</p>
</li>
</ol>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">2. 自定义全局指令使用方式</span><br><span class="line"></span><br><span class="line">```html</span><br><span class="line">&lt;input type=&quot;text&quot; v-model=&quot;searchName&quot; v-focus v-color=&quot;&#x27;red&#x27;&quot; v-font-weight=&quot;900&quot;&gt;</span><br></pre></td></tr></table></figure>

<h2 id="5-2-自定义局部指令"><a href="#5-2-自定义局部指令" class="headerlink" title="5.2 自定义局部指令"></a>5.2 自定义局部指令</h2><ol>
<li><p>指令定义</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 自定义局部指令 v-color 和 v-font-weight，为绑定的元素设置指定的字体颜色 和 字体粗细：</span></span><br><span class="line"><span class="attr">directives</span>: &#123;</span><br><span class="line">    <span class="attr">color</span>: &#123; <span class="comment">// 为元素设置指定的字体颜色</span></span><br><span class="line">        <span class="title function_">bind</span>(<span class="params">el, binding</span>) &#123;</span><br><span class="line">            el.<span class="property">style</span>.<span class="property">color</span> = binding.<span class="property">value</span>;</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;,</span><br><span class="line"></span><br><span class="line">        <span class="string">&#x27;font-weight&#x27;</span>: <span class="keyword">function</span> (<span class="params">el, binding2</span>) &#123; <span class="comment">// 自定义指令的简写形式，等同于定义了 bind 和 update 两个钩子函数</span></span><br><span class="line">            el.<span class="property">style</span>.<span class="property">fontWeight</span> = binding2.<span class="property">value</span>;</span><br><span class="line">        &#125;</span><br><span class="line"></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></li>
<li><p>自定义局部指令使用方式</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;text&quot;</span> <span class="attr">v-model</span>=<span class="string">&quot;searchName&quot;</span> <span class="attr">v-focus</span> <span class="attr">v-color</span>=<span class="string">&quot;&#x27;blue&#x27;&quot;</span> <span class="attr">v-font-weight</span>=<span class="string">&quot;500&quot;</span>&gt;</span></span><br></pre></td></tr></table></figure></li>
</ol>
<h1 id="6-动画"><a href="#6-动画" class="headerlink" title="6. 动画"></a>6. 动画</h1><p><strong>作为后端的攻城狮，搞这些花里胡哨的功能干嘛，有这时间和兴趣多研究后端架构!</strong></p>
<p><strong>如果特别对动画有兴趣，请移步<a target="_blank" rel="noopener" href="https://www.runoob.com/vue2/vue-transitions.html">这里进行学习</a></strong></p>
<h1 id="7-watch监听和computed计算"><a href="#7-watch监听和computed计算" class="headerlink" title="7. watch监听和computed计算"></a>7. watch监听和computed计算</h1><h2 id="7-1-watch属性"><a href="#7-1-watch属性" class="headerlink" title="7.1 watch属性"></a>7.1 watch属性</h2><p><strong>需求: 页面有三个文本输入框，分别是bt1、bt2、bt3，当bt1和bt2两个文本框数据改变的时候，自动监听填充到bt3中</strong></p>
<h3 id="7-1-1-传统实现"><a href="#7-1-1-传统实现" class="headerlink" title="7.1.1 传统实现"></a>7.1.1 传统实现</h3><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;app&quot;</span>&gt;</span></span><br><span class="line">        <span class="comment">&lt;!-- 分析： --&gt;</span></span><br><span class="line">        <span class="comment">&lt;!-- 1. 我们要监听到 文本框数据的改变，这样才能知道 什么时候去拼接 出一个 fullname --&gt;</span></span><br><span class="line">        <span class="comment">&lt;!-- 2. 如何监听到 文本框的数据改变呢？？？ --&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;text&quot;</span> <span class="attr">v-model</span>=<span class="string">&quot;firstname&quot;</span> @<span class="attr">keyup</span>=<span class="string">&quot;getFullname&quot;</span>&gt;</span> +</span><br><span class="line">        <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;text&quot;</span> <span class="attr">v-model</span>=<span class="string">&quot;lastname&quot;</span> @<span class="attr">keyup</span>=<span class="string">&quot;getFullname&quot;</span>&gt;</span> =</span><br><span class="line">        <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;text&quot;</span> <span class="attr">v-model</span>=<span class="string">&quot;fullname&quot;</span>&gt;</span></span><br><span class="line"></span><br><span class="line">    <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"></span><br><span class="line">    <span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">        <span class="comment">// 创建 Vue 实例，得到 ViewModel</span></span></span><br><span class="line"><span class="language-javascript">        <span class="keyword">var</span> vm = <span class="keyword">new</span> <span class="title class_">Vue</span>(&#123;</span></span><br><span class="line"><span class="language-javascript">            <span class="attr">el</span>: <span class="string">&#x27;#app&#x27;</span>,</span></span><br><span class="line"><span class="language-javascript">            <span class="attr">data</span>: &#123;</span></span><br><span class="line"><span class="language-javascript">                <span class="attr">firstname</span>: <span class="string">&#x27;&#x27;</span>,</span></span><br><span class="line"><span class="language-javascript">                <span class="attr">lastname</span>: <span class="string">&#x27;&#x27;</span>,</span></span><br><span class="line"><span class="language-javascript">                <span class="attr">fullname</span>: <span class="string">&#x27;&#x27;</span></span></span><br><span class="line"><span class="language-javascript">            &#125;,</span></span><br><span class="line"><span class="language-javascript">            <span class="attr">methods</span>: &#123;</span></span><br><span class="line"><span class="language-javascript">                <span class="title function_">getFullname</span>(<span class="params"></span>) &#123;</span></span><br><span class="line"><span class="language-javascript">                    <span class="variable language_">this</span>.<span class="property">fullname</span> = <span class="variable language_">this</span>.<span class="property">firstname</span> + <span class="string">&#x27;-&#x27;</span> + <span class="variable language_">this</span>.<span class="property">lastname</span></span></span><br><span class="line"><span class="language-javascript">                &#125;</span></span><br><span class="line"><span class="language-javascript">            &#125;</span></span><br><span class="line"><span class="language-javascript">        &#125;);</span></span><br><span class="line"><span class="language-javascript">    </span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h3 id="7-1-2-改进实现"><a href="#7-1-2-改进实现" class="headerlink" title="7.1.2 改进实现"></a>7.1.2 改进实现</h3><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;app&quot;</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;text&quot;</span> <span class="attr">v-model</span>=<span class="string">&quot;firstname&quot;</span>&gt;</span> +</span><br><span class="line">        <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;text&quot;</span> <span class="attr">v-model</span>=<span class="string">&quot;lastname&quot;</span>&gt;</span> =</span><br><span class="line">        <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;text&quot;</span> <span class="attr">v-model</span>=<span class="string">&quot;fullname&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"></span><br><span class="line">    <span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">        <span class="comment">// 创建 Vue 实例，得到 ViewModel</span></span></span><br><span class="line"><span class="language-javascript">        <span class="keyword">var</span> vm = <span class="keyword">new</span> <span class="title class_">Vue</span>(&#123;</span></span><br><span class="line"><span class="language-javascript">            <span class="attr">el</span>: <span class="string">&#x27;#app&#x27;</span>,</span></span><br><span class="line"><span class="language-javascript">            <span class="attr">data</span>: &#123;</span></span><br><span class="line"><span class="language-javascript">                <span class="attr">firstname</span>: <span class="string">&#x27;&#x27;</span>,</span></span><br><span class="line"><span class="language-javascript">                <span class="attr">lastname</span>: <span class="string">&#x27;&#x27;</span>,</span></span><br><span class="line"><span class="language-javascript">                <span class="attr">fullname</span>: <span class="string">&#x27;&#x27;</span></span></span><br><span class="line"><span class="language-javascript">            &#125;,</span></span><br><span class="line"><span class="language-javascript">            <span class="attr">methods</span>: &#123;&#125;,</span></span><br><span class="line"><span class="language-javascript">            <span class="attr">watch</span>: &#123; <span class="comment">// 使用这个 属性，可以监视 data 中指定数据的变化，然后触发这个 watch 中对应的 function 处理函数</span></span></span><br><span class="line"><span class="language-javascript">                <span class="string">&#x27;firstname&#x27;</span>: <span class="keyword">function</span> (<span class="params">newVal, oldVal</span>) &#123;</span></span><br><span class="line"><span class="language-javascript">                    <span class="comment">// console.log(&#x27;监视到了 firstname 的变化&#x27;)</span></span></span><br><span class="line"><span class="language-javascript">                    <span class="comment">// this.fullname = this.firstname + &#x27;-&#x27; + this.lastname</span></span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">                    <span class="comment">// console.log(newVal + &#x27; --- &#x27; + oldVal)</span></span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">                    <span class="variable language_">this</span>.<span class="property">fullname</span> = newVal + <span class="string">&#x27;-&#x27;</span> + <span class="variable language_">this</span>.<span class="property">lastname</span></span></span><br><span class="line"><span class="language-javascript">                &#125;,</span></span><br><span class="line"><span class="language-javascript">                <span class="string">&#x27;lastname&#x27;</span>: <span class="keyword">function</span> (<span class="params">newVal</span>) &#123;</span></span><br><span class="line"><span class="language-javascript">                    <span class="variable language_">this</span>.<span class="property">fullname</span> = <span class="variable language_">this</span>.<span class="property">firstname</span> + <span class="string">&#x27;+&#x27;</span> + newVal</span></span><br><span class="line"><span class="language-javascript">                &#125;</span></span><br><span class="line"><span class="language-javascript">            &#125;</span></span><br><span class="line"><span class="language-javascript">        &#125;);</span></span><br><span class="line"><span class="language-javascript">    </span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h3 id="7-1-3-watch监听路由地址改变"><a href="#7-1-3-watch监听路由地址改变" class="headerlink" title="7.1.3 watch监听路由地址改变"></a>7.1.3 watch监听路由地址改变</h3><p>请思考: keyup事件针对元素，那么请问路由是虚拟的，有keyup事件吗？答案是没有的，需求通过watch监听</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;app&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">router-link</span> <span class="attr">to</span>=<span class="string">&quot;/login&quot;</span>&gt;</span>登录<span class="tag">&lt;/<span class="name">router-link</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">router-link</span> <span class="attr">to</span>=<span class="string">&quot;/register&quot;</span>&gt;</span>注册<span class="tag">&lt;/<span class="name">router-link</span>&gt;</span></span><br><span class="line">    <span class="comment">&lt;!-- 容器 --&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">router-view</span>&gt;</span><span class="tag">&lt;/<span class="name">router-view</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"></span><br><span class="line">  <span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// 2. 创建子组件</span></span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">var</span> login = &#123;</span></span><br><span class="line"><span class="language-javascript">      <span class="attr">template</span>: <span class="string">&#x27;&lt;h3&gt;这是登录子组件，这个组件是 李彤 开发的。&lt;/h3&gt;&#x27;</span></span></span><br><span class="line"><span class="language-javascript">    &#125;</span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">var</span> register = &#123;</span></span><br><span class="line"><span class="language-javascript">      <span class="attr">template</span>: <span class="string">&#x27;&lt;h3&gt;这是注册子组件，这个组件是 李彤彤  开发的。&lt;/h3&gt;&#x27;</span></span></span><br><span class="line"><span class="language-javascript">    &#125;</span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// 3. 创建一个路由对象</span></span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">var</span> router = <span class="keyword">new</span> <span class="title class_">VueRouter</span>(&#123;</span></span><br><span class="line"><span class="language-javascript">      <span class="attr">routes</span>: [ <span class="comment">// 路由规则数组</span></span></span><br><span class="line"><span class="language-javascript">        &#123; <span class="attr">path</span>: <span class="string">&#x27;/&#x27;</span>, <span class="attr">redirect</span>: <span class="string">&#x27;/login&#x27;</span> &#125;,</span></span><br><span class="line"><span class="language-javascript">        &#123; <span class="attr">path</span>: <span class="string">&#x27;/login&#x27;</span>, <span class="attr">component</span>: login &#125;,</span></span><br><span class="line"><span class="language-javascript">        &#123; <span class="attr">path</span>: <span class="string">&#x27;/register&#x27;</span>, <span class="attr">component</span>: register &#125;</span></span><br><span class="line"><span class="language-javascript">      ],</span></span><br><span class="line"><span class="language-javascript">      <span class="attr">linkActiveClass</span>: <span class="string">&#x27;myactive&#x27;</span> <span class="comment">// 激活相关的类</span></span></span><br><span class="line"><span class="language-javascript">    &#125;)</span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// 创建 Vue 实例，得到 ViewModel</span></span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">var</span> vm = <span class="keyword">new</span> <span class="title class_">Vue</span>(&#123;</span></span><br><span class="line"><span class="language-javascript">      <span class="attr">el</span>: <span class="string">&#x27;#app&#x27;</span>,</span></span><br><span class="line"><span class="language-javascript">      <span class="attr">data</span>: &#123;&#125;,</span></span><br><span class="line"><span class="language-javascript">      <span class="attr">methods</span>: &#123;&#125;,</span></span><br><span class="line"><span class="language-javascript">      <span class="comment">// router: router</span></span></span><br><span class="line"><span class="language-javascript">      router,</span></span><br><span class="line"><span class="language-javascript">      <span class="attr">watch</span>: &#123;</span></span><br><span class="line"><span class="language-javascript">        <span class="comment">//  this.$route.path</span></span></span><br><span class="line"><span class="language-javascript">        <span class="string">&#x27;$route.path&#x27;</span>: <span class="keyword">function</span> (<span class="params">newVal, oldVal</span>) &#123;</span></span><br><span class="line"><span class="language-javascript">          <span class="comment">// console.log(newVal + &#x27; --- &#x27; + oldVal)</span></span></span><br><span class="line"><span class="language-javascript">          <span class="keyword">if</span> (newVal === <span class="string">&#x27;/login&#x27;</span>) &#123;</span></span><br><span class="line"><span class="language-javascript">            <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;欢迎进入登录页面&#x27;</span>)</span></span><br><span class="line"><span class="language-javascript">          &#125; <span class="keyword">else</span> <span class="keyword">if</span> (newVal === <span class="string">&#x27;/register&#x27;</span>) &#123;</span></span><br><span class="line"><span class="language-javascript">            <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;欢迎进入注册页面&#x27;</span>)</span></span><br><span class="line"><span class="language-javascript">          &#125;</span></span><br><span class="line"><span class="language-javascript">        &#125;</span></span><br><span class="line"><span class="language-javascript">      &#125;</span></span><br><span class="line"><span class="language-javascript">    &#125;);</span></span><br><span class="line"><span class="language-javascript">  </span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h2 id="7-2-computed属性"><a href="#7-2-computed属性" class="headerlink" title="7.2 computed属性"></a>7.2 computed属性</h2><h3 id="7-2-1-computed基本使用"><a href="#7-2-1-computed基本使用" class="headerlink" title="7.2.1 computed基本使用"></a>7.2.1 computed基本使用</h3><ol>
<li><p>默认只有<code>getter</code>的计算属性</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;app&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;text&quot;</span> <span class="attr">v-model</span>=<span class="string">&quot;firstName&quot;</span>&gt;</span> +</span><br><span class="line">    <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;text&quot;</span> <span class="attr">v-model</span>=<span class="string">&quot;lastName&quot;</span>&gt;</span> =</span><br><span class="line">    <span class="tag">&lt;<span class="name">span</span>&gt;</span>&#123;&#123;fullName&#125;&#125;<span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// 创建 Vue 实例，得到 ViewModel</span></span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">var</span> vm = <span class="keyword">new</span> <span class="title class_">Vue</span>(&#123;</span></span><br><span class="line"><span class="language-javascript">        <span class="attr">el</span>: <span class="string">&#x27;#app&#x27;</span>,</span></span><br><span class="line"><span class="language-javascript">        <span class="attr">data</span>: &#123;</span></span><br><span class="line"><span class="language-javascript">            <span class="attr">firstName</span>: <span class="string">&#x27;jack&#x27;</span>,</span></span><br><span class="line"><span class="language-javascript">            <span class="attr">lastName</span>: <span class="string">&#x27;chen&#x27;</span></span></span><br><span class="line"><span class="language-javascript">        &#125;,</span></span><br><span class="line"><span class="language-javascript">        <span class="attr">methods</span>: &#123;&#125;,</span></span><br><span class="line"><span class="language-javascript">        <span class="attr">computed</span>: &#123; <span class="comment">// 计算属性； 特点：当计算属性中所以来的任何一个 data 属性改变之后，都会重新触发 本计算属性 的重新计算，从而更新 fullName 的值</span></span></span><br><span class="line"><span class="language-javascript">            <span class="title function_">fullName</span>(<span class="params"></span>) &#123;</span></span><br><span class="line"><span class="language-javascript">                <span class="keyword">return</span> <span class="variable language_">this</span>.<span class="property">firstName</span> + <span class="string">&#x27; - &#x27;</span> + <span class="variable language_">this</span>.<span class="property">lastName</span>;</span></span><br><span class="line"><span class="language-javascript">            &#125;</span></span><br><span class="line"><span class="language-javascript">        &#125;</span></span><br><span class="line"><span class="language-javascript">    &#125;);</span></span><br><span class="line"><span class="language-javascript"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure></li>
<li><p>定义有<code>getter</code>和<code>setter</code>的计算属性</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;app&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;text&quot;</span> <span class="attr">v-model</span>=<span class="string">&quot;firstName&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;text&quot;</span> <span class="attr">v-model</span>=<span class="string">&quot;lastName&quot;</span>&gt;</span></span><br><span class="line">    <span class="comment">&lt;!-- 点击按钮重新为 计算属性 fullName 赋值 --&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;button&quot;</span> <span class="attr">value</span>=<span class="string">&quot;修改fullName&quot;</span> @<span class="attr">click</span>=<span class="string">&quot;changeName&quot;</span>&gt;</span></span><br><span class="line"></span><br><span class="line">    <span class="tag">&lt;<span class="name">span</span>&gt;</span>&#123;&#123;fullName&#125;&#125;<span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// 创建 Vue 实例，得到 ViewModel</span></span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">var</span> vm = <span class="keyword">new</span> <span class="title class_">Vue</span>(&#123;</span></span><br><span class="line"><span class="language-javascript">        <span class="attr">el</span>: <span class="string">&#x27;#app&#x27;</span>,</span></span><br><span class="line"><span class="language-javascript">        <span class="attr">data</span>: &#123;</span></span><br><span class="line"><span class="language-javascript">            <span class="attr">firstName</span>: <span class="string">&#x27;jack&#x27;</span>,</span></span><br><span class="line"><span class="language-javascript">            <span class="attr">lastName</span>: <span class="string">&#x27;chen&#x27;</span></span></span><br><span class="line"><span class="language-javascript">        &#125;,</span></span><br><span class="line"><span class="language-javascript">        <span class="attr">methods</span>: &#123;</span></span><br><span class="line"><span class="language-javascript">            <span class="title function_">changeName</span>(<span class="params"></span>) &#123;</span></span><br><span class="line"><span class="language-javascript">                <span class="variable language_">this</span>.<span class="property">fullName</span> = <span class="string">&#x27;TOM - chen2&#x27;</span>;</span></span><br><span class="line"><span class="language-javascript">            &#125;</span></span><br><span class="line"><span class="language-javascript">        &#125;,</span></span><br><span class="line"><span class="language-javascript">        <span class="attr">computed</span>: &#123;</span></span><br><span class="line"><span class="language-javascript">            <span class="attr">fullName</span>: &#123;</span></span><br><span class="line"><span class="language-javascript">                <span class="attr">get</span>: <span class="keyword">function</span> (<span class="params"></span>) &#123;</span></span><br><span class="line"><span class="language-javascript">                    <span class="keyword">return</span> <span class="variable language_">this</span>.<span class="property">firstName</span> + <span class="string">&#x27; - &#x27;</span> + <span class="variable language_">this</span>.<span class="property">lastName</span>;</span></span><br><span class="line"><span class="language-javascript">                &#125;,</span></span><br><span class="line"><span class="language-javascript">                <span class="attr">set</span>: <span class="keyword">function</span> (<span class="params">newVal</span>) &#123;</span></span><br><span class="line"><span class="language-javascript">                    <span class="keyword">var</span> parts = newVal.<span class="title function_">split</span>(<span class="string">&#x27; - &#x27;</span>);</span></span><br><span class="line"><span class="language-javascript">                    <span class="variable language_">this</span>.<span class="property">firstName</span> = parts[<span class="number">0</span>];</span></span><br><span class="line"><span class="language-javascript">                    <span class="variable language_">this</span>.<span class="property">lastName</span> = parts[<span class="number">1</span>];</span></span><br><span class="line"><span class="language-javascript">                &#125;</span></span><br><span class="line"><span class="language-javascript">            &#125;</span></span><br><span class="line"><span class="language-javascript">        &#125;</span></span><br><span class="line"><span class="language-javascript">    &#125;);</span></span><br><span class="line"><span class="language-javascript"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure></li>
</ol>
<h3 id="7-2-2-computed小练习"><a href="#7-2-2-computed小练习" class="headerlink" title="7.2.2  computed小练习"></a>7.2.2  computed小练习</h3><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;app&quot;</span>&gt;</span></span><br><span class="line"></span><br><span class="line">        <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;text&quot;</span> <span class="attr">v-model</span>=<span class="string">&quot;firstname&quot;</span>&gt;</span> +</span><br><span class="line">        <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;text&quot;</span> <span class="attr">v-model</span>=<span class="string">&quot;middlename&quot;</span>&gt;</span> +</span><br><span class="line">        <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;text&quot;</span> <span class="attr">v-model</span>=<span class="string">&quot;lastname&quot;</span>&gt;</span> =</span><br><span class="line">        <span class="comment">&lt;!-- 这里不要写成fullname() --&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;text&quot;</span> <span class="attr">v-model</span>=<span class="string">&quot;fullname&quot;</span>&gt;</span></span><br><span class="line">        <span class="comment">&lt;!-- 引用fullname，ok只输出一次 --&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">p</span>&gt;</span>&#123;&#123; fullname &#125;&#125;<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">p</span>&gt;</span>&#123;&#123; fullname &#125;&#125;<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">p</span>&gt;</span>&#123;&#123; fullname &#125;&#125;<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line"></span><br><span class="line">    <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"></span><br><span class="line">    <span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">        <span class="comment">// 创建 Vue 实例，得到 ViewModel</span></span></span><br><span class="line"><span class="language-javascript">        <span class="keyword">var</span> vm = <span class="keyword">new</span> <span class="title class_">Vue</span>(&#123;</span></span><br><span class="line"><span class="language-javascript">            <span class="attr">el</span>: <span class="string">&#x27;#app&#x27;</span>,</span></span><br><span class="line"><span class="language-javascript">            <span class="attr">data</span>: &#123;</span></span><br><span class="line"><span class="language-javascript">                <span class="attr">firstname</span>: <span class="string">&#x27;&#x27;</span>,</span></span><br><span class="line"><span class="language-javascript">                <span class="attr">lastname</span>: <span class="string">&#x27;&#x27;</span>,</span></span><br><span class="line"><span class="language-javascript">                <span class="attr">middlename</span>: <span class="string">&#x27;&#x27;</span></span></span><br><span class="line"><span class="language-javascript">            &#125;,</span></span><br><span class="line"><span class="language-javascript">            <span class="attr">methods</span>: &#123;&#125;,</span></span><br><span class="line"><span class="language-javascript">            <span class="attr">computed</span>: &#123; <span class="comment">// 在 computed 中，可以定义一些 属性，这些属性，叫做 【计算属性】， 计算属性的，本质，就是 一个方法，只不过，我们在使用 这些计算属性的时候，是把 它们的 名称，直接当作 属性来使用的；并不会把 计算属性，当作方法去调用；</span></span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">                <span class="comment">// 注意1： 计算属性，在引用的时候，一定不要加 () 去调用，直接把它 当作 普通 属性去使用就好了；</span></span></span><br><span class="line"><span class="language-javascript">                <span class="comment">// 注意2： 只要 计算属性，这个 function 内部，所用到的 任何 data 中的数据发送了变化，就会 立即重新计算 这个 计算属性的值</span></span></span><br><span class="line"><span class="language-javascript">                <span class="comment">// 注意3： 计算属性的求值结果，会被缓存起来，方便下次直接使用； 如果 计算属性方法中，所以来的任何数据，都没有发生过变化，则，不会重新对 计算属性求值；</span></span></span><br><span class="line"><span class="language-javascript">                <span class="string">&#x27;fullname&#x27;</span>: <span class="keyword">function</span> (<span class="params"></span>) &#123;</span></span><br><span class="line"><span class="language-javascript">                    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;ok&#x27;</span>)  </span></span><br><span class="line"><span class="language-javascript">                    <span class="keyword">return</span> <span class="variable language_">this</span>.<span class="property">firstname</span> + <span class="string">&#x27;+&#x27;</span> + <span class="variable language_">this</span>.<span class="property">middlename</span> + <span class="string">&#x27;+&#x27;</span> + <span class="variable language_">this</span>.<span class="property">lastname</span></span></span><br><span class="line"><span class="language-javascript">                &#125;</span></span><br><span class="line"><span class="language-javascript">            &#125;</span></span><br><span class="line"><span class="language-javascript">        &#125;);</span></span><br><span class="line"><span class="language-javascript">    </span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h2 id="7-3-watch、computed和methods区别"><a href="#7-3-watch、computed和methods区别" class="headerlink" title="7.3 watch、computed和methods区别"></a>7.3 watch、computed和methods区别</h2><ol>
<li><code>computed</code>属性的结果会被缓存，除非依赖的响应式属性变化才会重新计算。主要当作属性来使用；</li>
<li><code>methods</code>方法表示一个具体的操作，主要书写业务逻辑；</li>
<li><code>watch</code>一个对象，键是需要观察的表达式，值是对应回调函数。主要用来监听某些特定数据的变化，从而进行某些具体的业务逻辑操作；可以看作是<code>computed</code>和<code>methods</code>的结合体；</li>
</ol>
<h1 id="8-渲染组件的另一种方式"><a href="#8-渲染组件的另一种方式" class="headerlink" title="8. 渲染组件的另一种方式"></a>8. 渲染组件的另一种方式</h1><h2 id="8-1-组件定义标签渲染视图"><a href="#8-1-组件定义标签渲染视图" class="headerlink" title="8.1 组件定义标签渲染视图"></a>8.1 组件定义标签渲染视图</h2><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;app&quot;</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">mv</span>&gt;</span><span class="tag">&lt;/<span class="name">mv</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">template</span> <span class="attr">id</span>=<span class="string">&quot;tmpl&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span>&gt;</span><span class="tag">&lt;<span class="name">h1</span>&gt;</span>这是用标签方式渲染的组件<span class="tag">&lt;/<span class="name">h1</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">template</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">var</span> mv = &#123;</span></span><br><span class="line"><span class="language-javascript">        <span class="attr">template</span>:  <span class="string">&#x27;#tmpl&#x27;</span></span></span><br><span class="line"><span class="language-javascript">    &#125;</span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">new</span> <span class="title class_">Vue</span>(&#123;</span></span><br><span class="line"><span class="language-javascript">        <span class="attr">el</span>: <span class="string">&quot;#app&quot;</span>,</span></span><br><span class="line"><span class="language-javascript">        <span class="attr">data</span>: &#123;</span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">        &#125;,</span></span><br><span class="line"><span class="language-javascript">        <span class="attr">components</span>: &#123;</span></span><br><span class="line"><span class="language-javascript">            mv</span></span><br><span class="line"><span class="language-javascript">        &#125;</span></span><br><span class="line"><span class="language-javascript">    &#125;)</span></span><br><span class="line"><span class="language-javascript"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h2 id="8-2-使用render函数渲染视图"><a href="#8-2-使用render函数渲染视图" class="headerlink" title="8.2 使用render函数渲染视图"></a>8.2 使用render函数渲染视图</h2><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;app&quot;</span>&gt;</span></span><br><span class="line">        我是本身的内容，看一看是否覆盖</span><br><span class="line">    <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">template</span> <span class="attr">id</span>=<span class="string">&quot;tmpl&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span>&gt;</span><span class="tag">&lt;<span class="name">h1</span>&gt;</span>这是用render函数渲染的组件<span class="tag">&lt;/<span class="name">h1</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">template</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">var</span> mv = &#123;</span></span><br><span class="line"><span class="language-javascript">        <span class="attr">template</span>:  <span class="string">&#x27;#tmpl&#x27;</span></span></span><br><span class="line"><span class="language-javascript">    &#125;</span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">new</span> <span class="title class_">Vue</span>(&#123;</span></span><br><span class="line"><span class="language-javascript">        <span class="attr">el</span>: <span class="string">&quot;#app&quot;</span>,</span></span><br><span class="line"><span class="language-javascript">        <span class="attr">data</span>: &#123;</span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">        &#125;,</span></span><br><span class="line"><span class="language-javascript">        <span class="comment">// render(createEl) &#123;</span></span></span><br><span class="line"><span class="language-javascript">        <span class="comment">//   return createEl(mv)</span></span></span><br><span class="line"><span class="language-javascript">        <span class="comment">// &#125;</span></span></span><br><span class="line"><span class="language-javascript">        <span class="comment">// 使用箭头函数简化书写，render函数渲染组件时候会覆盖当前实例的内容</span></span></span><br><span class="line"><span class="language-javascript">        <span class="attr">render</span>: <span class="function"><span class="params">createEl</span>=&gt;</span><span class="title function_">createEl</span>(mv)</span></span><br><span class="line"><span class="language-javascript">    &#125;)</span></span><br><span class="line"><span class="language-javascript"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h1 id="9-相关文档"><a href="#9-相关文档" class="headerlink" title="9.  相关文档"></a>9.  相关文档</h1><ol>
<li><a target="_blank" rel="noopener" href="http://www.cnblogs.com/joyho/articles/4430148.html">URL中的hash（井号）</a></li>
<li><a target="_blank" rel="noopener" href="https://router.vuejs.org/zh/">Vue Router</a></li>
<li><a target="_blank" rel="noopener" href="https://vuex.vuejs.org/">Vuex</a></li>
</ol>
</section>
    <!-- Tags START -->
    
      <div class="tags">
        <span>Tags:</span>
        
  <a href="/tags#Vue" >
    <span class="tag-code">Vue</span>
  </a>

      </div>
    
    <!-- Tags END -->
    <!-- NAV START -->
    
  <div class="nav-container">
    <!-- reverse left and right to put prev and next in a more logic postition -->
    
      <a class="nav-left" href="/2020/02/02/Vue%E6%96%B0%E6%89%8B%E5%85%A5%E9%97%A8%E6%8C%87%E5%8D%97/">
        <span class="nav-arrow">← </span>
        
          Vue新手入门指南
        
      </a>
    
    
      <a class="nav-right" href="/2020/02/11/%E5%89%8D%E7%AB%AF%E6%9E%84%E5%BB%BA%E5%B7%A5%E5%85%B7webpack%E5%85%A5%E9%97%A8/">
        
          前端构建工具webpack入门
        
        <span class="nav-arrow"> →</span>
      </a>
    
  </div>

    <!-- NAV END -->
    <!-- 打赏 START -->
    
      <div class="money-like">
        <div class="reward-btn">
          赏
          <span class="money-code">
            <span class="alipay-code">
              <div class="code-image"></div>
              <b>使用支付宝打赏</b>
            </span>
            <span class="wechat-code">
              <div class="code-image"></div>
              <b>使用微信打赏</b>
            </span>
          </span>
        </div>
        <p class="notice">若你觉得我的文章对你有帮助，欢迎点击上方按钮对我打赏</p>
      </div>
    
    <!-- 打赏 END -->
    <!-- 二维码 START -->
    
      <div class="qrcode">
        <canvas id="share-qrcode"></canvas>
        <p class="notice">扫描二维码，分享此文章</p>
      </div>
    
    <!-- 二维码 END -->
    
      <!-- Utterances START -->
      <div id="utterances"></div>
      <script src="https://utteranc.es/client.js"
        repo="ltyeamin/blogtalks"
        issue-term="pathname"
        theme="github-light"
        crossorigin="anonymous"
        async></script>    
      <!-- Utterances END -->
    
  </article>
  <!-- Article END -->
  <!-- Catalog START -->
  
    <aside class="catalog-container">
  <div class="toc-main">
    <strong class="toc-title">Catalog</strong>
    
      <ol class="toc-nav"><li class="toc-nav-item toc-nav-level-1"><a class="toc-nav-link" href="#1-Vue%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F"><span class="toc-nav-text">1. Vue生命周期</span></a><ol class="toc-nav-child"><li class="toc-nav-item toc-nav-level-2"><a class="toc-nav-link" href="#1-1-%E4%BB%80%E4%B9%88%E6%98%AF%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F"><span class="toc-nav-text">1.1 什么是生命周期</span></a></li><li class="toc-nav-item toc-nav-level-2"><a class="toc-nav-link" href="#1-2-Vue%E5%AE%9E%E4%BE%8B%E7%9A%84%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F"><span class="toc-nav-text">1.2 Vue实例的生命周期</span></a></li></ol></li><li class="toc-nav-item toc-nav-level-1"><a class="toc-nav-link" href="#2-Vue%E7%BB%84%E4%BB%B6"><span class="toc-nav-text">2. Vue组件</span></a><ol class="toc-nav-child"><li class="toc-nav-item toc-nav-level-2"><a class="toc-nav-link" href="#2-1-%E4%BB%80%E4%B9%88%E6%98%AF%E7%BB%84%E4%BB%B6"><span class="toc-nav-text">2.1 什么是组件</span></a></li><li class="toc-nav-item toc-nav-level-2"><a class="toc-nav-link" href="#2-2-%E7%BB%84%E4%BB%B6%E7%B1%BB%E5%9E%8B%E5%8F%8A%E5%85%B6%E5%AE%9A%E4%B9%89"><span class="toc-nav-text">2.2 组件类型及其定义</span></a><ol class="toc-nav-child"><li class="toc-nav-item toc-nav-level-3"><a class="toc-nav-link" href="#2-2-1-%E5%85%A8%E5%B1%80%E7%BB%84%E4%BB%B6"><span class="toc-nav-text">2.2.1 全局组件</span></a></li><li class="toc-nav-item toc-nav-level-3"><a class="toc-nav-link" href="#2-2-3-%E7%A7%81%E6%9C%89%E7%BB%84%E4%BB%B6"><span class="toc-nav-text">2.2.3 私有组件</span></a></li></ol></li><li class="toc-nav-item toc-nav-level-2"><a class="toc-nav-link" href="#2-3-%E7%BB%84%E4%BB%B6%E4%B8%AD%E5%B1%95%E7%A4%BA%E6%95%B0%E6%8D%AE%E5%92%8C%E5%93%8D%E5%BA%94%E4%BA%8B%E4%BB%B6"><span class="toc-nav-text">2.3 组件中展示数据和响应事件</span></a></li><li class="toc-nav-item toc-nav-level-2"><a class="toc-nav-link" href="#2-4-%E6%8E%A2%E6%9F%A5%E7%BB%84%E4%BB%B6%E4%B8%ADdata%E5%B1%9E%E6%80%A7%E4%B8%BA%E5%AF%B9%E8%B1%A1%E7%9A%84%E5%8E%9F%E5%9B%A0"><span class="toc-nav-text">2.4 探查组件中data属性为对象的原因</span></a></li><li class="toc-nav-item toc-nav-level-2"><a class="toc-nav-link" href="#2-5-%E5%B1%80%E9%83%A8%E5%AD%90%E7%BB%84%E4%BB%B6"><span class="toc-nav-text">2.5 局部子组件</span></a></li><li class="toc-nav-item toc-nav-level-2"><a class="toc-nav-link" href="#2-6-%E7%BB%84%E4%BB%B6%E5%88%87%E6%8D%A2"><span class="toc-nav-text">2.6 组件切换</span></a><ol class="toc-nav-child"><li class="toc-nav-item toc-nav-level-3"><a class="toc-nav-link" href="#2-6-1-%E4%BD%BF%E7%94%A8flag%E6%A0%87%E8%AF%86%E7%AC%A6%E7%BB%93%E5%90%88v-if%E5%92%8Cv-else%E5%88%87%E6%8D%A2%E7%BB%84%E4%BB%B6"><span class="toc-nav-text">2.6.1 使用flag标识符结合v-if和v-else切换组件</span></a></li><li class="toc-nav-item toc-nav-level-3"><a class="toc-nav-link" href="#2-6-2-%E4%BD%BF%E7%94%A8-is%E5%B1%9E%E6%80%A7%E6%9D%A5%E5%88%87%E6%8D%A2%E4%B8%8D%E5%90%8C%E7%9A%84%E5%AD%90%E7%BB%84%E4%BB%B6"><span class="toc-nav-text">2.6.2 使用:is属性来切换不同的子组件</span></a></li></ol></li><li class="toc-nav-item toc-nav-level-2"><a class="toc-nav-link" href="#2-7-%E7%BB%84%E4%BB%B6%E9%97%B4%E5%80%BC%E4%BC%A0%E9%80%92%E5%92%8C%E6%96%B9%E6%B3%95%E4%BC%A0%E9%80%92"><span class="toc-nav-text">2.7 组件间值传递和方法传递</span></a><ol class="toc-nav-child"><li class="toc-nav-item toc-nav-level-3"><a class="toc-nav-link" href="#2-7-1-%E7%88%B6%E7%BB%84%E4%BB%B6%E5%90%91%E5%AD%90%E7%BB%84%E4%BB%B6%E4%BC%A0%E5%80%BC"><span class="toc-nav-text">2.7.1 父组件向子组件传值</span></a></li><li class="toc-nav-item toc-nav-level-3"><a class="toc-nav-link" href="#2-7-2-%E7%88%B6%E7%BB%84%E4%BB%B6%E5%90%91%E5%AD%90%E7%BB%84%E4%BB%B6%E4%BC%A0%E6%96%B9%E6%B3%95"><span class="toc-nav-text">2.7.2 父组件向子组件传方法</span></a></li><li class="toc-nav-item toc-nav-level-3"><a class="toc-nav-link" href="#2-7-3-%E5%AD%90%E7%BB%84%E4%BB%B6%E5%90%91%E7%88%B6%E7%BB%84%E4%BB%B6%E4%BC%A0%E5%80%BC"><span class="toc-nav-text">2.7.3 子组件向父组件传值</span></a></li><li class="toc-nav-item toc-nav-level-3"><a class="toc-nav-link" href="#2-7-4-%E5%85%84%E5%BC%9F%E7%BB%84%E4%BB%B6%E4%BC%A0%E5%80%BC"><span class="toc-nav-text">2.7.4 兄弟组件传值</span></a></li><li class="toc-nav-item toc-nav-level-3"><a class="toc-nav-link" href="#2-7-4-%E7%BB%84%E4%BB%B6%E6%8F%92%E6%A7%BD"><span class="toc-nav-text">2.7.4 组件插槽</span></a></li></ol></li><li class="toc-nav-item toc-nav-level-2"><a class="toc-nav-link" href="#2-8-%E8%8E%B7%E5%8F%96DOM%E5%85%83%E7%B4%A0%E5%92%8C%E7%BB%84%E4%BB%B6%E5%BC%95%E7%94%A8"><span class="toc-nav-text">2.8 获取DOM元素和组件引用</span></a></li><li class="toc-nav-item toc-nav-level-2"><a class="toc-nav-link" href="#2-9-%E7%BB%84%E4%BB%B6%E7%BB%BC%E5%90%88%E7%BB%83%E4%B9%A0"><span class="toc-nav-text">2.9 组件综合练习</span></a></li></ol></li><li class="toc-nav-item toc-nav-level-1"><a class="toc-nav-link" href="#3-Vue-Router"><span class="toc-nav-text">3. Vue Router</span></a><ol class="toc-nav-child"><li class="toc-nav-item toc-nav-level-2"><a class="toc-nav-link" href="#3-1-%E8%B7%AF%E7%94%B1%E5%AE%9A%E4%B9%89"><span class="toc-nav-text">3.1 路由定义</span></a></li><li class="toc-nav-item toc-nav-level-2"><a class="toc-nav-link" href="#3-2-vue-router%E5%9F%BA%E6%9C%AC%E7%94%A8%E6%B3%95"><span class="toc-nav-text">3.2  vue-router基本用法</span></a></li><li class="toc-nav-item toc-nav-level-2"><a class="toc-nav-link" href="#3-3-%E8%B7%AF%E7%94%B1%E8%A7%84%E5%88%99%E4%B8%AD%E5%AE%9A%E4%B9%89%E5%8F%82%E6%95%B0"><span class="toc-nav-text">3.3 路由规则中定义参数</span></a><ol class="toc-nav-child"><li class="toc-nav-item toc-nav-level-3"><a class="toc-nav-link" href="#3-3-1-%E5%9C%A8%E8%A7%84%E5%88%99%E4%B8%AD%E5%AE%9A%E4%B9%89%E5%8F%82%E6%95%B0"><span class="toc-nav-text">3.3.1  在规则中定义参数</span></a></li><li class="toc-nav-item toc-nav-level-3"><a class="toc-nav-link" href="#3-3-2-this-route-params%E8%8E%B7%E5%8F%96%E8%B7%AF%E7%94%B1%E4%B8%AD%E7%9A%84%E5%8F%82%E6%95%B0"><span class="toc-nav-text">3.3.2 this.$route.params获取路由中的参数</span></a></li><li class="toc-nav-item toc-nav-level-3"><a class="toc-nav-link" href="#3-3-3-%E4%BD%BF%E7%94%A8%E6%9F%A5%E8%AF%A2%E5%AD%97%E7%AC%A6%E4%B8%B2%E4%BC%A0%E9%80%92%E5%8F%82%E6%95%B0"><span class="toc-nav-text">3.3.3 使用查询字符串传递参数</span></a></li><li class="toc-nav-item toc-nav-level-3"><a class="toc-nav-link" href="#3-3-4-%E4%BD%BF%E7%94%A8Restful%E6%A0%BC%E5%BC%8F%E4%BC%A0%E5%8F%82"><span class="toc-nav-text">3.3.4 使用Restful格式传参</span></a></li></ol></li><li class="toc-nav-item toc-nav-level-2"><a class="toc-nav-link" href="#3-4-%E8%B7%AF%E7%94%B1%E5%B5%8C%E5%A5%97"><span class="toc-nav-text">3.4 路由嵌套</span></a></li><li class="toc-nav-item toc-nav-level-2"><a class="toc-nav-link" href="#3-5-%E5%91%BD%E5%90%8D%E8%A7%86%E5%9B%BE"><span class="toc-nav-text">3.5 命名视图</span></a></li></ol></li><li class="toc-nav-item toc-nav-level-1"><a class="toc-nav-link" href="#4-Vuex"><span class="toc-nav-text">4. Vuex</span></a><ol class="toc-nav-child"><li class="toc-nav-item toc-nav-level-2"><a class="toc-nav-link" href="#4-1-Vuex%E6%98%AF%E4%B8%AA%E4%BB%80%E4%B9%88%E9%AC%BC"><span class="toc-nav-text">4.1 Vuex是个什么鬼</span></a></li><li class="toc-nav-item toc-nav-level-2"><a class="toc-nav-link" href="#4-2-%E2%80%9C%E7%8A%B6%E6%80%81%E7%AE%A1%E7%90%86%E2%80%9D%E5%8F%88%E6%98%AF%E4%B8%AA%E4%BB%80%E4%B9%88%E9%AC%BC"><span class="toc-nav-text">4.2 “状态管理”又是个什么鬼</span></a></li><li class="toc-nav-item toc-nav-level-2"><a class="toc-nav-link" href="#4-3-%E4%BB%80%E4%B9%88%E6%97%B6%E5%80%99%E7%94%A8Vuex"><span class="toc-nav-text">4.3 什么时候用Vuex</span></a></li><li class="toc-nav-item toc-nav-level-2"><a class="toc-nav-link" href="#4-4-%E5%BC%80%E5%A7%8B%E4%BD%BF%E7%94%A8Vuex"><span class="toc-nav-text">4.4 开始使用Vuex</span></a></li><li class="toc-nav-item toc-nav-level-2"><a class="toc-nav-link" href="#4-5-%E7%94%A8Vuex%E5%AE%9E%E7%8E%B0%E8%B4%AD%E7%89%A9%E8%BD%A6%E7%9A%84%E6%95%B0%E6%8D%AE%E6%93%8D%E4%BD%9C"><span class="toc-nav-text">4.5 用Vuex实现购物车的数据操作</span></a></li></ol></li><li class="toc-nav-item toc-nav-level-1"><a class="toc-nav-link" href="#5-%E8%87%AA%E5%AE%9A%E4%B9%89%E6%8C%87%E4%BB%A4"><span class="toc-nav-text">5. 自定义指令</span></a><ol class="toc-nav-child"><li class="toc-nav-item toc-nav-level-2"><a class="toc-nav-link" href="#5-1-%E8%87%AA%E5%AE%9A%E4%B9%89%E5%85%A8%E5%B1%80%E6%8C%87%E4%BB%A4"><span class="toc-nav-text">5.1 自定义全局指令</span></a></li><li class="toc-nav-item toc-nav-level-2"><a class="toc-nav-link" href="#5-2-%E8%87%AA%E5%AE%9A%E4%B9%89%E5%B1%80%E9%83%A8%E6%8C%87%E4%BB%A4"><span class="toc-nav-text">5.2 自定义局部指令</span></a></li></ol></li><li class="toc-nav-item toc-nav-level-1"><a class="toc-nav-link" href="#6-%E5%8A%A8%E7%94%BB"><span class="toc-nav-text">6. 动画</span></a></li><li class="toc-nav-item toc-nav-level-1"><a class="toc-nav-link" href="#7-watch%E7%9B%91%E5%90%AC%E5%92%8Ccomputed%E8%AE%A1%E7%AE%97"><span class="toc-nav-text">7. watch监听和computed计算</span></a><ol class="toc-nav-child"><li class="toc-nav-item toc-nav-level-2"><a class="toc-nav-link" href="#7-1-watch%E5%B1%9E%E6%80%A7"><span class="toc-nav-text">7.1 watch属性</span></a><ol class="toc-nav-child"><li class="toc-nav-item toc-nav-level-3"><a class="toc-nav-link" href="#7-1-1-%E4%BC%A0%E7%BB%9F%E5%AE%9E%E7%8E%B0"><span class="toc-nav-text">7.1.1 传统实现</span></a></li><li class="toc-nav-item toc-nav-level-3"><a class="toc-nav-link" href="#7-1-2-%E6%94%B9%E8%BF%9B%E5%AE%9E%E7%8E%B0"><span class="toc-nav-text">7.1.2 改进实现</span></a></li><li class="toc-nav-item toc-nav-level-3"><a class="toc-nav-link" href="#7-1-3-watch%E7%9B%91%E5%90%AC%E8%B7%AF%E7%94%B1%E5%9C%B0%E5%9D%80%E6%94%B9%E5%8F%98"><span class="toc-nav-text">7.1.3 watch监听路由地址改变</span></a></li></ol></li><li class="toc-nav-item toc-nav-level-2"><a class="toc-nav-link" href="#7-2-computed%E5%B1%9E%E6%80%A7"><span class="toc-nav-text">7.2 computed属性</span></a><ol class="toc-nav-child"><li class="toc-nav-item toc-nav-level-3"><a class="toc-nav-link" href="#7-2-1-computed%E5%9F%BA%E6%9C%AC%E4%BD%BF%E7%94%A8"><span class="toc-nav-text">7.2.1 computed基本使用</span></a></li><li class="toc-nav-item toc-nav-level-3"><a class="toc-nav-link" href="#7-2-2-computed%E5%B0%8F%E7%BB%83%E4%B9%A0"><span class="toc-nav-text">7.2.2  computed小练习</span></a></li></ol></li><li class="toc-nav-item toc-nav-level-2"><a class="toc-nav-link" href="#7-3-watch%E3%80%81computed%E5%92%8Cmethods%E5%8C%BA%E5%88%AB"><span class="toc-nav-text">7.3 watch、computed和methods区别</span></a></li></ol></li><li class="toc-nav-item toc-nav-level-1"><a class="toc-nav-link" href="#8-%E6%B8%B2%E6%9F%93%E7%BB%84%E4%BB%B6%E7%9A%84%E5%8F%A6%E4%B8%80%E7%A7%8D%E6%96%B9%E5%BC%8F"><span class="toc-nav-text">8. 渲染组件的另一种方式</span></a><ol class="toc-nav-child"><li class="toc-nav-item toc-nav-level-2"><a class="toc-nav-link" href="#8-1-%E7%BB%84%E4%BB%B6%E5%AE%9A%E4%B9%89%E6%A0%87%E7%AD%BE%E6%B8%B2%E6%9F%93%E8%A7%86%E5%9B%BE"><span class="toc-nav-text">8.1 组件定义标签渲染视图</span></a></li><li class="toc-nav-item toc-nav-level-2"><a class="toc-nav-link" href="#8-2-%E4%BD%BF%E7%94%A8render%E5%87%BD%E6%95%B0%E6%B8%B2%E6%9F%93%E8%A7%86%E5%9B%BE"><span class="toc-nav-text">8.2 使用render函数渲染视图</span></a></li></ol></li><li class="toc-nav-item toc-nav-level-1"><a class="toc-nav-link" href="#9-%E7%9B%B8%E5%85%B3%E6%96%87%E6%A1%A3"><span class="toc-nav-text">9.  相关文档</span></a></li></ol>
    
  </div>
</aside>
  
  <!-- Catalog END -->
</main>

<script>
  (function () {
    var url = 'http://example.com/2020/02/03/Vue新手进阶指南/';
    var banner = ''
    if (banner !== '' && banner !== 'undefined' && banner !== 'null') {
      $('#article-banner').css({
        'background-image': 'url(' + banner + ')'
      })
    } else {
      $('#article-banner').geopattern(url)
    }
    $('.header').removeClass('fixed-header')

    // error image
    $(".markdown-content img").on('error', function() {
      $(this).attr('src', '/css/images/error_icon.png')
      $(this).css({
        'cursor': 'default'
      })
    })

    // zoom image
    $(".markdown-content img").on('click', function() {
      var src = $(this).attr('src')
      if (src !== '/css/images/error_icon.png') {
        var imageW = $(this).width()
        var imageH = $(this).height()

        var zoom = ($(window).width() * 0.95 / imageW).toFixed(2)
        zoom = zoom < 1 ? 1 : zoom
        zoom = zoom > 2 ? 2 : zoom
        var transY = (($(window).height() - imageH) / 2).toFixed(2)

        $('body').append('<div class="image-view-wrap"><div class="image-view-inner"><img src="'+ src +'" /></div></div>')
        $('.image-view-wrap').addClass('wrap-active')
        $('.image-view-wrap img').css({
          'width': `${imageW}`,
          'transform': `translate3d(0, ${transY}px, 0) scale3d(${zoom}, ${zoom}, 1)`
        })
        $('html').css('overflow', 'hidden')

        $('.image-view-wrap').on('click', function() {
          $(this).remove()
          $('html').attr('style', '')
        })
      }
    })
  })();
</script>


  <script>
    var qr = new QRious({
      element: document.getElementById('share-qrcode'),
      value: document.location.href
    });
  </script>






    <div class="scroll-top">
  <span class="arrow-icon"></span>
</div>
    <footer class="app-footer">
  <p class="copyright">
    &copy; 2024 | Proudly powered by <a href="https://hexo.io" target="_blank">Hexo</a>
    <br>
    Theme by <a target="_blank" rel="noopener" href="https://github.com/ltyeamin">tong.li</a>
  </p>
</footer>

<script>
  function async(u, c) {
    var d = document, t = 'script',
      o = d.createElement(t),
      s = d.getElementsByTagName(t)[0];
    o.src = u;
    if (c) { o.addEventListener('load', function (e) { c(null, e); }, false); }
    s.parentNode.insertBefore(o, s);
  }
</script>
<script>
  async("https://cdn.staticfile.org/fastclick/1.0.6/fastclick.min.js", function(){
    FastClick.attach(document.body);
  })
</script>

<script>
  var hasLine = 'true';
  async("https://cdn.staticfile.org/highlight.js/9.12.0/highlight.min.js", function(){
    $('figure pre').each(function(i, block) {
      var figure = $(this).parents('figure');
      if (hasLine === 'false') {
        figure.find('.gutter').hide();
      }
      hljs.configure({useBR: true});
      var lang = figure.attr('class').split(' ')[1] || 'code';
      var codeHtml = $(this).html();
      var codeTag = document.createElement('code');
      codeTag.className = lang;
      codeTag.innerHTML = codeHtml;
      $(this).attr('class', '').empty().html(codeTag);
      figure.attr('data-lang', lang.toUpperCase());
      hljs.highlightBlock(block);
    });
  })
</script>
<!-- Baidu Tongji -->



<script src='https://cdn.staticfile.org/mermaid/8.11.2/mermaid.min.js'></script>



<script src="/js/script.js"></script>


  </body>
</html>